ColmanDevClubORG · nadav-cohen11 · Dec 23, 2024 · Dec 23, 2024 · Dec 24, 2024 · Jan 1, 2025
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <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>
+    <title>Countries</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

diff --git a/src/App.jsx b/src/App.jsx
@@ -3,10 +3,12 @@ import "../src/assets/css/details.css";
 import "../src/assets/css/main.css";
 import "../src/assets/scss/common.scss";
 import Home from "./pages/Home";
+import Header from "./components/Header";
 
 function App() {
     return (
         <>
+            <Header />
             <Home />
         </>
     );

diff --git a/src/assets/scss/_dark-theme.scss b/src/assets/scss/_dark-theme.scss
@@ -85,9 +85,29 @@ body {
       li {
         color: $dark-gray;
       }
+
       strong {
         color: $white;
       }
     }
+
+    #modal-content {
+      background-color: $bg-very-dark-blue;
+      li {
+        color: $dark-gray;
+      }
+
+      strong {
+        color: $white;
+      }
+
+      h2 {
+        color: $white;
+      }
+
+      a {
+        color: $white;
+      }
+    }
   }
-}
+  }
diff --git a/src/components/Country.jsx b/src/components/Country.jsx
@@ -1,10 +1,35 @@
-import React from 'react'
+import Modal from "./Modal/Modal";
+import { useState } from "react";
 
-const Country = () => {
+const Country = ({card}) => {
+  const { flags, name, population, region, capital } = card;
+  const [ isOpen, setOpen ] = useState(false)
+
+  const openModal = () => {
+    setOpen(true)
+  }
+
+  const closeModal = () => {
+    setOpen(false)
+  }
   return (
-    // TODO: Country component
-    <div>Country</div>
-  )
-}
+    <>
+      <a className="country scale-effect" data-country-name={name.common} onClick={openModal}>
+        <div className="country-flag">
+          <img src={flags.png} alt="Belize FLag" />
+        </div>
+        <div className="country-info">
+          <h2 className="country-title">{name.common}</h2>
+          <ul className="country-brief">
+            <li><strong>population: </strong>{population.toLocaleString()}</li>
+            <li><strong>Region: </strong>{region}</li>
+            <li><strong>capital: </strong>{capital}</li>
+          </ul>
+        </div>
+      </a>
+      <Modal isOpen={isOpen} Close={closeModal} countryData={card} />
+    </>
+  );
+};
 
 export default Country
diff --git a/src/components/Filter/filter.jsx b/src/components/Filter/filter.jsx
@@ -0,0 +1,54 @@
+import { useState } from "react"
+
+const Filter = ({ onSearch }) => {
+  const regions = ["all", "africa", "americas", "asia", "europe", "oceania"];
+  const [displayDropdown, setDisplayDropdown] = useState(false);
+
+  const regionValue = (region) => {
+    onSearch(region);
+    setDisplayDropdown(false);
+  }
+
+  const toggleDropdown = () => {
+    setDisplayDropdown(!displayDropdown);
+  };
+
+  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..."
+            onChange={(e) => { onSearch(e.target.value) }}
+          />
+        </div>
+        <div className={`dropdown-wrapper ${displayDropdown ? "open" : ""}`}>
+          <div
+            className="dropdown-header flex flex-jc-sb flex-ai-c"
+            onClick={toggleDropdown}
+          >
+            <span>Filter by Region</span>
+            <i className="fa-regular fa-chevron-down icon"></i>
+          </div>
+          <div className="dropdown-body">
+            <ul>
+              {regions.map((region) => (
+                <li
+                  key={region}
+                  onClick={() => regionValue(region)}
+                  data-region={region}
+                >
+                  {region}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+export default Filter;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { HardCodedStrings } from "./constants";
+
+const Header = () => {
+    const [toggleDarkMode, setDispalayDarkMode] = useState(false);
+
+    const handleDarkModeClick = () => {
+        setDispalayDarkMode(!toggleDarkMode)
+    }
+
+    useEffect(() => {
+        document.body.classList.toggle("dark-theme", toggleDarkMode);
+    }, [toggleDarkMode]);
+
+    return (
+        <header className="header">
+            <div className="container flex flex-jc-sb flex-ai-c">
+                <div className="logo">
+                    <a href="/">
+                        <h1>{HardCodedStrings.logoText}</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" onClick={handleDarkModeClick}>{HardCodedStrings.darkModeText}</span>
+                </button>
+            </div>
+        </header>
+    );
+};
+
+export default Header;