Taak: Een encyclopediebron maken

In deze taak maak je een encyclopediebron bestaande uit twee kaarten. Elke kaart toont een afbeelding en een beschrijving. Het doel is om te oefenen met het maken van functionele componenten en het doorgeven van gegevens aan kindcomponenten via props.

Instructies:

1. Maak een Card-component als herbruikbare kaarttemplate.
2. Accepteer in de Card-component de volgende props:
   • link: De URL van de afbeelding voor de kaart;
   • alt: De alternatieve tekst voor de afbeelding;
   • description: De beschrijvingstekst voor de kaart.
3. Gebruik de Card-component tweemaal in de App-component om twee kaarten te maken met de volgende inhoud:

Kaart 1 (Over de Zon):

• Afbeeldings-URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/sun.png
• Alternatieve tekst: Geef een passende beschrijving.
• Beschrijving: "De zon scheen fel en wierp een warme gloed over het rustige strand."

Kaart 2 (Over de Berg):

• Afbeeldings-URL: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/introduction-to-react/mountain.png
• Alternatieve tekst: Geef een passende beschrijving.
• Beschrijving: "De wandelaar keek vol ontzag naar de majestueuze berg die voor hem oprees."

Zorg ervoor dat zowel de Card- als de App-componenten correct zijn aangepast om de kaarten juist weer te geven.

Hier is een startcode met placeholders die je kunt aanvullen:

1. Gebruik dezelfde Card-component voor beide kaarten en beheer hun inhoud via props.
2. Om de URL als prop door te geven, maak je een prop genaamd link en geef je de URL als waarde op. Zet de waarde tussen dubbele aanhalingstekens omdat het een string is.
3. Maak op dezelfde manier props voor alt en description en geef de juiste waarden op.
4. Om deze props binnen de child-component Card te gebruiken, benader je ze met dotnotatie omdat props een object is.