ColmanDevClubORG · AdiAmar1 · Dec 24, 2024 · Dec 25, 2024 · Dec 29, 2024
diff --git a/index.html b/index.html
@@ -1,13 +1,27 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet" />
+  <!-- Fontawesome Library -->
+  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css" />
+  <!-- Shared CSS Styles File -->
+  <link rel="stylesheet" href="./css/common.css" />
+  <!-- Page Custom CSS File -->
+  <link rel="stylesheet" href="./css/main.css" />
+  <title>Countries Info</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/src/components/Country.jsx b/src/components/Country.jsx
@@ -1,10 +1,32 @@
 import React from 'react'
 
-const Country = () => {
+export const Country = ({ countryData }) => {
   return (
-    // TODO: Country component
-    <div>Country</div>
+  <div className='country'>
+
+    <img src={countryData.flag} className='country-flag'></img>
+
+    <div className='country-info'>
+      <h2 className='country-title'>{countryData.name}</h2>
+      <ul className='country-brief'>
+
+        <li>
+          <strong>Population: </strong>
+          <span className='country-population'>{countryData.population}</span>
+        </li>
+
+        <li>
+        <strong>region: </strong>
+        <span className='country-region'>{countryData.region}</span>
+        </li>
+
+        <li>
+        <strong>capital: </strong>
+        <span className='country-capital'>{countryData.capital}</span>
+        </li>
+
+      </ul>
+    </div>
+  </div>
   )
 }
-
-export default Country
diff --git a/src/components/Filters.jsx b/src/components/Filters.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export const Filters = () => {
+    return (
+
+            <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">
+                    <div className="dropdown-header flex flex-jc-sb flex-ai-c">
+                        <span>Filter by Region</span>
+                        <i className="fa-regular fa-chevron-down icon"></i>
+                    </div>
+                    <div className="dropdown-body">
+                        <ul>
+                            <li data-region="all">All</li>
+                            <li data-region="africa">Africa</li>
+                            <li data-region="america">America</li>
+                            <li data-region="asia">Asia</li>
+                            <li data-region="europe">Europe</li>
+                            <li data-region="oceania">Oceania</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+    )
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { ThemeToggle } from "./ThemeToggle";
+
+export const Header = () => {
+    return (
+            <div className="container flex flex-jc-sb flex-ai-c">
+                <div className="logo">
+                    <a href="Home.jsx">
+                        <h1>Where in the world?</h1>
+                    </a>
+                </div>
+                <ThemeToggle></ThemeToggle>
+            </div>
+    )
+}
+
+
+
+
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useState } from "react";
+
+
+export const ThemeToggle = () => {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const toggleTheme = () => {
+        setIsDarkMode(!isDarkMode);
+        document.body.classList.toggle("dark-theme", isDarkMode);
+    };
+
+    return (
+        <button
+            type="button"
+            aria-label="Theme Switcher Button"
+            className="theme-toggle flex flex-jc-sb flex-ai-c"
+            onClick={toggleTheme}>
+
+            <i className={`fa-${isDarkMode ? "solid" : "regular"} fa-moon theme-icon`}></i>
+            <span className="theme-text">{isDarkMode ? "Light Mode" : "Dark Mode"}</span>
+
+        </button>
+
+    )
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,12 +1,36 @@
 import React from "react";
+import {Header} from "../components/Header";
+import { Filters } from "../components/Filters";
+import { Country } from "../components/Country";
+import datajson from "../assets/CountriesData.json";
+
 
 const Home = () => {
     return (
-        // TODO: Home page
-        // Render Country component (components/Country.jsx) for each country
-        // Take data from (assets/CountriesData.json)
-        <div>Home</div>
+
+        <div>
+
+            <header className="header">
+                <Header></Header>
+            </header>
+
+            <section className="filters">
+                <Filters></Filters>
+            </section>
+
+            <div className="main">
+                <div className="container">
+                    <div className="countries-grid">
+                        {datajson.map((cardD, index) => (
+                            <Country countryData={cardD} key={cardD.name}></Country>
+                        ))}
+                    </div>
+                </div>
+            </div>
+
+        </div>
     );
 };
 
 export default Home;
+