From d41531d88b1617abbc612be10a13bc2796d15672 Mon Sep 17 00:00:00 2001
From: hodaya123 <hodayak3@gmail.com>
Date: Mon, 23 Dec 2024 17:32:19 +0200
Subject: [PATCH] add a json data to the page and implement search input

---
 src/components/Country.jsx | 23 ++++++++++++++++++++---
 src/pages/Home.jsx         | 35 ++++++++++++++++++++++++++++++-----
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/Country.jsx b/src/components/Country.jsx
index 177580c..f578a60 100644
--- a/src/components/Country.jsx
+++ b/src/components/Country.jsx
@@ -1,10 +1,27 @@
 import React from 'react'
 
-const Country = () => {
+export const Country = ({name ,flag , population , region , capital}) => {
   return (
     // TODO: Country component
-    <div>Country</div>
+    <div className="country scale-effect"> 
+    <img src={flag} className="country-flag"></img>
+    <div className="country-info">
+    <div className="country-brief">
+    <p>{name}</p>
+    <p>{population}</p>
+    <p>{region}</p>
+    <p>{capital}</p>
+    </div>
+    </div>
+    </div>
   )
 }
 
-export default Country
\ No newline at end of file
+export default Country
+
+
+// "name": "Åland Islands",
+// "flag": "https://flagcdn.com/w320/ax.png",
+// "population": 21225,
+// "region": "Europe",
+// "capital": "Mariehamn"
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 507e0c5..cd3dc6e 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,11 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
+import {Country} from "../components/Country"
+import data from '../assets/CountriesData.json'
+
 
 const Home = () => {
+    const [cards, setCards]=useState(data)
+    const onSearch=(e)=>{
+        const newData= data.filter((card)=>card.name.toLowerCase().includes(e.target.value.toLowerCase()));
+        console.log(newData)
+        setCards(newData);
+    
+    }
+    
     return (
-        // TODO: Home page
-        // Render Country component (components/Country.jsx) for each country
-        // Take data from (assets/CountriesData.json)
-        <div>Home</div>
+        <div>
+            <input type="text" className="search-input" placeholder="Search for a country..." onChange={onSearch}></input>
+            <div className="countries-grid"> 
+                { cards.map((card)=>{
+                    return (
+                    <Country 
+                    key={card.name}
+                    name={card.name} 
+                    flag={card.flag} 
+                    population={card.population} 
+                    region={card.region} 
+                    capital={card.capital}> </Country>
+                )
+            })
+
+        }
+        </div>
+        </div>
     );
 };