Open React Activity and complete Steps 2-4 again, but do the coding work in a folder named tutorial09.

Use this folder location:

csci344/tutorials/tutorial09

By the time you finish this part, you should have:

Build a custom React component (no Ant Design yet) called Card.

It must accept at least three props:

• name — text title for the card
• image_url — URL string for the image
• description — short text body

What to do

1. Add a components folder under src if you do not have one yet.

2. Create Card.jsx and Card.css in the components directory.

3. In Card.jsx, render at least: an <img> (use image_url and name for alt), a heading for name, and a paragraph (or similar) for description.

   import React from "react";
   import "./Card.css";
   
   export default function Card({ name, image_url, description }) {
     return (
       <section className="card">
           <h2>{name}</h2>
           {/* add remaining HTML tags + data  */}
       </section>
     );
   }

4. Style it in Card.css so it clearly looks like a card (border or shadow, spacing, readable type).

5. In App.jsx, import Card and render at least two cards with different prop values, for example:

   <Card
     name="Sample item"
     image_url="https://picsum.photos/id/237/400/300"
     description="A short description goes here."
   />

   You can also put a few objects in an array and use .map(...); if you do, give each list item a stable key.

1. Stop the dev server (Ctrl+C in the terminal).

2. Install Ant Design:

   npm install antd

3. Load Ant Design’s styles once in your entry file (usually main.jsx), above your other imports that render UI:

   import "antd/dist/reset.css";

4. Open the Ant Design docs for the Image component:
   ant.design/components/image

5. On that page, find a basic example (often the first demo). Copy the import line for Image from the example (or from the code snippet the docs show).

6. Paste that import at the top of App.jsx, with your other imports (for example below import React ... and above your Card import).

7. Copy the JSX for the Image widget from the same example (the part that looks like <Image ... /> or a small group of images).

8. Paste that JSX inside the return (...) of your App component (usually inside <main> or a wrapper) so it appears on the page when you run the app.

9. Adjust src or width if you want your own photo URLs. Then, save and run npm run dev and confirm the Ant Design image renders.

This step is practice reading official docs, placing imports in the right file, and placing components in valid JSX.

Add a second component, AntCard.jsx, that shows the same three pieces of information as your custom Card, but built with Ant Design’s Card component.

1. Create src/components/AntCard.jsx.
2. Import Card from antd (and anything else you need from antd for layout).
3. Give AntCard the same props as your custom card: name, image_url, description.
4. Map them into Ant Design’s API in a sensible way, for example:
   • use Ant Design’s cover prop (or Card’s body) for the image
   • use title={name} or a heading inside the card for the name
   • put description in the card body
5. In App.jsx, render at least one <AntCard ... /> next to (or below) your custom <Card /> so you can compare the two.

What to Think About

When you compare your custom Card and your AntCard, ask yourself:

1. Speed: Which one was faster to build?
2. Control: Which one gave you more freedom to style exactly what you wanted?
3. Complexity: Which one required more code and more decisions?
4. Consistency: Which one made it easier to keep spacing, typography, and layout consistent?

Beyond the Image from section 3 and the Card inside AntCard.jsx, add at least two other distinct antd components somewhere in your app (for example a Button, Tag, Space, Typography, Carousel, Drawer, etc.).

Skim the Ant Design components list and wire up anything that fits your page.

Requirement: Your finished app should use at least four different antd component types: Image (section 3), Card inside AntCard.jsx (section 4), and two others you add in this section (for example Button and Tag).