Solution

src/components/commons/Card/Card.jsx

@@ -1,3 +1,69 @@
-export const Card = () => {
-    return <div className="card-container">TODO</div>;
+import { LinkButton } from "../LinkButton/LinkButton";
+import { Description } from "../Description/Description";
+import { SubTitle } from "../SubTitle/SubTitle";
+import { Title } from "../Title/Title";
+
+// import data from "../../../assets/data/data.json";
+
+// 1 - build the caomponent base
+
+// export const Card = () => {
+//     return (
+//         <div className="card-container">
+//             <img src="" alt="" />
+//             <Title>Im a title</Title>
+//             <SubTitle>best location</SubTitle>
+//             <Description text="This is a description" />
+//             <LinkButton link="">Github</LinkButton>
+//             <LinkButton link="">Twitter</LinkButton>
+//         </div>
+//     );
+// };
+
+// 2 - handle one item
+
+// export const Card = () => {
+//     const [first, ...rest] = data;
+//     return (
+//         <div className="card-container">
+//             <img src={first.image} alt="" />
+//             <Title>{first.title}</Title>
+//             <SubTitle>{first.location}</SubTitle>
+//             <Description text={first.description} />
+//             <LinkButton link={first.links[0].url}>{first.links[0].name}</LinkButton>
+//             <LinkButton link={first.links[1].url}>{first.links[1].name}</LinkButton>
+//         </div>
+//     );
+// };
+
+// 3 - Handle multiple buttons
+// export const Card = () => {
+//     const [first, ..._] = data;
+//     return (
+//         <div className="card-container">
+//             <img src={first.image} alt="place" />
+//             <Title>{first.title}</Title>
+//             <SubTitle>{first.location}</SubTitle>
+//             <Description text={first.description} />
+//             {first.links.map(({ url, name }) => (
+//                 <LinkButton key={name} link={url}>{name}</LinkButton>
+//             ))}
+//         </div>
+//     );
+// };
+
+// 4 - add props to Card to handle multiple Cards (from Home.jsx)
+
+export const Card = ({ image, title, location, description, links, id }) => {
+    return (
+        <div className="card-container">
+            <img src={image} alt="place" />
+            <Title>{title}</Title>
+            <SubTitle>{location}</SubTitle>
+            <Description text={description} />
+            {links.map(({ url, name }) => (
+                <LinkButton key={`${name}+${id}`} link={url}>{name}</LinkButton>
+            ))}
+        </div>
+    );
 };

src/components/commons/Description/Description.jsx

@@ -0,0 +1,3 @@
+export const Description = ({ text }) => {
+    return <p>{text}</p>;
+};

src/components/commons/LinkButton/LinkButton.jsx

@@ -0,0 +1,3 @@
+export const LinkButton = ({ link, children }) => {
+    return <a href={link}> {children} </a>;
+};

src/components/commons/SubTitle/SubTitle.jsx

@@ -0,0 +1,3 @@
+export const SubTitle = ({ children }) => {
+    return <h2>{children}</h2>;
+};

src/components/commons/Title/Title.jsx

@@ -0,0 +1,3 @@
+export const Title = ({ children }) => {
+    return <h1>{children}</h1>;
+};

src/index.css

@@ -111,3 +111,4 @@ a:hover {
     background-color: var(--green);
     color: var(--grey-700);
 }
+

src/pages/Home.jsx

@@ -1,12 +1,37 @@
 import { Card } from "../components";
+import data from "../assets/data/data.json";
+import { useState } from "react";
 
 export const Home = () => {
+    const [filteredData, setFilteredData] = useState(data);
+
+    const handleChange = (e) => {
+        const text = e.target.value;
+        setFilteredData(
+            data.filter((cardData) =>
+                cardData.title
+                    .toLocaleLowerCase()
+                    .includes(text.toLocaleLowerCase())
+            )
+        );
+    };
+
     return (
         <div className="home-container">
-            {/* TODO: Implement filter by category when the user enters letters */}
-            {/* <input type="text" placeholder="Search" /> */}
+            <input type="text" onChange={handleChange} placeholder="Search" />
             <div className="cards-container">
-                <Card />
+                {filteredData.map((place) => (
+                    <Card
+                        key={place.id}
+                        {...place}
+                        // description={place.description}
+                        // image={place.image}
+                        // links={place.links}
+                        // location={place.location}
+                        // title={place.title}
+                        // key={place.id}
+                    />
+                ))}
             </div>
         </div>
     );