diff --git a/index.html b/index.html index 0c589ec..60d248a 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,27 @@ - - - - - Vite + React - - -
- - - + + + + + + + + + + + + + + + + + Countries Info + + + +
+ + + + \ No newline at end of file diff --git a/src/components/Country.jsx b/src/components/Country.jsx index 177580c..5c969bb 100644 --- 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 -
Country
+
+ + + +
+

{countryData.name}

+ +
+
) } - -export default Country \ No newline at end of file diff --git a/src/components/Filters.jsx b/src/components/Filters.jsx new file mode 100644 index 0000000..1332879 --- /dev/null +++ b/src/components/Filters.jsx @@ -0,0 +1,29 @@ +import React from "react"; + +export const Filters = () => { + return ( + +
+
+ + +
+
+
+ Filter by Region + +
+
+
    +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
    • +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..c67a35c --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import { ThemeToggle } from "./ThemeToggle"; + +export const Header = () => { + return ( +
+
+ +

Where in the world?

+ +
+ +
+ ) +} + + + + diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx new file mode 100644 index 0000000..00e3a9b --- /dev/null +++ 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 ( + + + ) +} \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 507e0c5..6c6e6fb 100644 --- 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) -
Home
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+ {datajson.map((cardD, index) => ( + + ))} +
+
+
+ +
); }; export default Home; +