ColmanDevClubORG · AdiAmar1 · Dec 24, 2024 · Dec 25, 2024 · Dec 29, 2024 · Jan 1, 2025
diff --git a/index.html b/index.html
@@ -1,13 +1,32 @@
 <!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/App.jsx b/src/App.jsx
@@ -2,6 +2,7 @@ import "../src/assets/css/common.css";
 import "../src/assets/css/details.css";
 import "../src/assets/css/main.css";
 import "../src/assets/scss/common.scss";
+
 import Home from "./pages/Home";
 
 function App() {

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 ,onClick }) => {
   return (
-    // TODO: Country component
-    <div>Country</div>
+  <div className='country' onClick={onClick}>
+
+    <img src={countryData.flag} className='country-flag'></img>
+
+    <div className='country-info'>
+      <h2 className='country-title'>{countryData.countryName}</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/Modal.jsx b/src/components/Modal.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import "./modal.css";
+
+
+
+export const Modal = ({ countryData, onClose }) => {
+    if (!countryData) return null;
+
+    const { countryName, flag, region, population, capital } = countryData;
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                {/* <button class="close-button" onclick="closeModal()">X</button> */}
+                <div className="country-flag">
+                    <img src={flag} alt={`${countryName} flag`} />
+                </div>
+                <div className="country-info">
+                    <h1>{countryName}</h1>
+                    <ul>
+                        <li><strong>Population: </strong>{population}</li>
+                        <li><strong>Region: </strong>{region}</li>
+                        <li><strong>Capital: </strong>{capital}</li>
+
+                    </ul>
+                </div>
+
+            </div>
+        </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/components/modal.css b/src/components/modal.css
@@ -0,0 +1,115 @@
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7); 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; 
+}
+
+.modal-content {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px 30px;
+    width: 90%;
+    height: 90vh;
+    max-width: 500px; 
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
+    animation: fadeIn 0.3s ease-out; 
+}
+
+.country-flag img {
+    max-width: 100%;
+    height: 250px;
+    border-radius: 5px;
+    margin-right: 15px;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.813); 
+
+}
+
+.country-flag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.country-info h1 {
+    font-size: 30px;
+    margin-top: -15px;
+    color: #333;
+    margin-bottom: 30px;
+    text-align: center;
+
+}
+
+.country-info ul {
+    list-style: none;
+    padding: 0;
+}
+
+.country-info li {
+    margin: 8px 0;
+    font-size: 16px;
+    color: #555;
+}
+
+.country-info li strong {
+    color: #333;
+}
+
+.close-button {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background-color: transparent;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+    color: #999;
+    transition: color 0.3s ease;
+}
+
+.close-button:hover {
+    color: #333;
+}
+
+/* אנימציות */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+
+
+
+ /* design for dark mode  */
+
+
+.dark-theme .modal-overlay {
+    background-color: #5757577d;
+}
+
+.dark-theme .modal-content {
+    background-color: #202c37;
+    color: #f5f5f5; 
+    border: 1px solid #444; 
+}
+
+.dark-theme .close-button {
+    color: #f5f5f5;
+}
+
+.dark-theme .close-button:hover {
+    color: #ddd;
+}