Завдання: Створення джерела енциклопедії

У цьому завданні потрібно створити енциклопедичне джерело з двох карток. Кожна картка повинна містити зображення та опис. Мета — попрактикуватися у створенні функціональних компонентів і передачі даних дочірнім компонентам за допомогою props.

Інструкції:

1. Створити компонент Card як багаторазовий шаблон картки.
2. У компоненті Card приймати такі props:
   • link: URL зображення для картки;
   • alt: альтернативний текст для зображення;
   • description: текст опису для картки.
3. Використати компонент Card двічі у компоненті App, щоб створити дві картки з наступним вмістом:

Картка 1 (Про Сонце):

• Image URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
• Alternative text: Надати відповідний опис.
• Description: "The sun shone brightly, casting a warm glow across the tranquil beach."

Картка 2 (Про Гору):

• Image URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
• Alternative text: Надати відповідний опис.
• Description: "The hiker gazed in awe at the majestic mountain towering before them."

Переконайтеся, що обидва компоненти Card та App належним чином змінені для коректного відображення карток.

Ось початковий код із заповнювачами, які потрібно доповнити:

1. Можна використовувати один і той самий компонент Card для обох карток та керувати їхнім вмістом за допомогою пропсів.
2. Щоб передати URL як проп, створіть проп із назвою link та вкажіть URL як його значення. Обов'язково використовуйте подвійні лапки, оскільки це рядок.
3. Аналогічно, створіть пропси для alt та description і вкажіть відповідні значення.
4. Щоб використовувати ці пропси всередині дочірнього компонента Card, звертайтеся до них через крапкову нотацію, оскільки props є об'єктом.