countries react Tal

src/components/Country.jsx

@@ -1,10 +1,16 @@
-import React from 'react'
-
-const Country = () => {
+export const Country = ({name,flag, population, region, capital}) => {
   return (
-    // TODO: Country component
-    <div>Country</div>
+    <div className="country">
+    <img className="country-flag" src={flag} alt={`Flag of ${name}`} />
+    <div className="country-info">
+      <h3 className="country-title">{name}</h3>
+      <ul className='country-brief'>
+        <li>Population: {population}</li>
+        <li>Region: {region}</li>
+        <li>Capital: {capital}</li>
+      </ul>
+    </div>
+  </div>
   )
 }
-
-export default Country
+export default Country

src/components/Header.jsx

@@ -0,0 +1,20 @@
+export const Header = () => {
+  return (
+    <div className="container flex flex-jc-sb flex-ai-c">
+      <div className="logo">
+        <a href="/">
+          <h1>Where in the world?</h1>
+        </a>
+      </div>
+      <button
+        type="button"
+        aria-label="Theme Switcher Button"
+        className="theme-toggle flex flex-jc-sb flex-ai-c"
+      >
+        <i className="fa-regular fa-moon theme-icon"></i>
+        <span className="theme-text">Dark Mode</span>
+      </button>
+    </div>
+  );
+};
+export default Header;

src/components/SearchBar.jsx

@@ -0,0 +1,41 @@
+
+import { useState } from 'react';
+
+const SearchBar = (props) => {
+    const regions = ["All", "Africa", "Americas", "Asia", "Europe", "Oceania"];
+    const [isOpen, setIsOpen] = useState(false);
+
+    // if the menu is open
+    const openDropDown = () => {
+        setIsOpen(!isOpen);
+    }
+
+    return (<>
+        <section className="filters">
+            <div className="container">
+                <div className="search-wrapper">
+                    <i className="fa-regular fa-magnifying-glass search-icon"></i>
+                    <input type="text" className="search-input" placeholder="Search for a country..."/>
+                </div>
+                <div className={`dropdown-wrapper ${isOpen ? "open" : ""}`}>
+                    <div className="dropdown-header flex flex-jc-sb flex-ai-c" onClick={openDropDown}>
+                        <span>Filter by Region</span>
+                        <i className="fa-regular fa-chevron-down icon"></i>
+                    </div>
+                    {isOpen && (
+                        <div className="dropdown-body">
+                            <ul>
+                                {regions.map((region, index) => (
+                                    <li key={index} data-region={region} onClick={()=>props.filterByRegionFunc(region)}>{region}</li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section >
+
+    </>)
+
+}
+   export default SearchBar;

src/pages/Home.jsx

@@ -1,12 +1,35 @@
-import React from "react";
-
-const Home = () => {
-    return (
-        // TODO: Home page
-        // Render Country component (components/Country.jsx) for each country
-        // Take data from (assets/CountriesData.json)
-        <div>Home</div>
-    );
+import { useState } from "react";
+import { Country } from "../components/Country";
+import data from "../assets/CountriesData.json";
+import Header from "../components/Header";
+import SearchBar from "../components/SearchBar";
+
+export const Home = () => {
+  const [countries, setCountries] = useState(data);
+
+  const filterByRegionFunc = (region) => {
+    const filteredCountries =
+      region === "All"
+        ? data
+        : data.filter((country) => country.region === region);
+    setCountries(filteredCountries);
+  };
+
+  return (
+    <>
+      <Header />
+      <SearchBar
+        filterByRegionFunc={filterByRegionFunc}
+      />
+      <div className="main container">
+        <div className="countries-grid">
+          {countries.map((country) => (
+            <Country key={country.name} {...country} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default Home;