diff --git a/eslint.config.js b/eslint.config.js index 238d2e4..8ccbce6 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -33,6 +33,11 @@ export default [ 'warn', { allowConstantExport: true }, ], + "no-undef": "off", + "no-unused-vars": [ + "warn", + { "varsIgnorePattern": "^_" } + ], }, }, ] diff --git a/index.html b/index.html index 0c589ec..1c94ad2 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,15 @@ - - Vite + React + + Countries React - +
- + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 2a88e41..8a0a140 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,13 +2,44 @@ 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"; +import Home from "./Home.jsx"; +import {useState} from "react"; + +/** + * App Component + * Manages the application, including theme state and persistence. + * + * State: + * - theme: Tracks the current theme ("light" or "dark"), initialized from localStorage. + * + */ function App() { + const [theme, setTheme] = useState(() => { + const savedTheme = localStorage.getItem("theme"); + + if (savedTheme) { + document.body.classList.toggle("dark-theme", savedTheme === "dark"); + return savedTheme; + } + + return "light"; + }); + + + const toggleTheme = () => { + const isDark = theme === "dark"; + const newTheme = isDark ? "light" : "dark"; + setTheme(newTheme); + + document.body.classList.toggle("dark-theme", newTheme === "dark"); + localStorage.setItem("theme", newTheme); + }; + return ( - <> - - +
+ +
); } diff --git a/src/Home.jsx b/src/Home.jsx new file mode 100644 index 0000000..77ecde8 --- /dev/null +++ b/src/Home.jsx @@ -0,0 +1,85 @@ +import {useState} from "react"; +import Country from "./components/Country.jsx"; +import Header from "./components/Header.jsx"; +import RegionFilter from "./components/RegionFilter.jsx"; +import SearchBox from "./components/SearchBox.jsx"; +import countriesData from './assets/json/CountriesData.json'; + +/** + * Home Component + * Manages the main layout, filtering, and display of countries. + * + * Props: + * - theme: Current theme ("light" or "dark"). + * - toggleTheme: Function to toggle the theme. + * + * Functionality: + * - Displays a list of countries with search and region filtering. + * - Allows toggling between light and dark themes. + */ +const Home = ({theme, toggleTheme}) => { + const [countries, setCountries] = useState(countriesData); + + + const showOneCountryDetails = (countryName) => { + setCountries(countriesData.filter((country) => country.name === countryName)); + }; + + + const showAllCountries = () => { + setCountries(countriesData); + }; + + + const searchByInput = (e) => { + const query = e.target.value.toLowerCase(); + if (query === "") { + setCountries(countriesData); + } else { + setCountries(countriesData.filter((country) => + country.name.toLowerCase().startsWith(query) + )); + } + }; + + const searchByRegion = (e) => { + const region = e.target.getAttribute("data-region"); + if (region === 'All') { + showAllCountries(); + } else { + setCountries(countriesData.filter((country) => country.region === region)); + } + } + const oneCountry = 1; + return ( + <> +
+
+
+ + {countries.length === oneCountry && ( + + )} + + +
+
+
+ {countries.map((country) => ( + { + showOneCountryDetails(country.name); + }}> + + + ))} +
+ + ); +}; + +export default Home; \ No newline at end of file diff --git a/src/assets/css/common.css b/src/assets/css/common.css index 7d63db5..7b465b2 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -1,3 +1,24 @@ +:root { + --color-black: #111517; + --color-dark-gray: #202c37; + --color-darker-gray: #2b3945; + --color-hover-gray: #283743; + --color-dark-blue: #354555; + --color-white: #ffffff; + --color-light-gray: #fafafa; + --color-medium-gray: #858585; + --color-border-gray: #ccc; + --color-border-hover-gray: #999; + --color-text-dark: #333; + --color-button-hover: #f7f7f7; + + --shadow-light: rgba(0, 0, 0, 0.08); + --shadow-medium: rgba(0, 0, 0, 0.1); + --shadow-hover: rgba(0, 0, 0, 0.2); + --shadow-dark: rgba(0, 0, 0, 0.3); + --shadow-extra-dark: rgba(0, 0, 0, 0.5); +} + *, *:after, *::before { @@ -7,20 +28,6 @@ outline: none; } -html { - font-size: 100%; - scroll-behavior: smooth; -} - -body { - font-family: 'Nunito Sans', sans-serif; - font-weight: 600; - font-size: 14px; - background-color: #fafafa; - color: #111517; - transition: 0.2s linear; -} - a { text-decoration: none; } @@ -34,7 +41,7 @@ h1, h2, h3, h4 { - color: #111517; + color: var(--color-black); } .container { @@ -89,10 +96,10 @@ button { .btn { display: inline-block; - background-color: white; - color: #111517; + background-color: var(--color-white); + color: var(--color-black); text-transform: capitalize; - box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 15px var(--shadow-light); padding: 7px 21px; border-radius: 4px; transition: 0.2s linear; @@ -118,7 +125,7 @@ button { left: 0; width: 100%; height: 100%; - background-color: #fafafa; + background-color: var(--color-light-gray); display: flex; justify-content: center; align-items: center; @@ -133,7 +140,7 @@ button { .loader .spinner .icon { font-size: 80px; - color: #111517; + color: var(--color-black); } .scroll-top { @@ -142,7 +149,7 @@ button { right: 0; width: 45px; height: 45px; - background-color: #202c37; + background-color: var(--color-dark-gray); border-radius: 50%; z-index: 8; opacity: 0; @@ -151,7 +158,7 @@ button { } .scroll-top:hover { - background-color: #283743; + background-color: var(--color-hover-gray); } .scroll-top.show { @@ -161,13 +168,13 @@ button { } .scroll-top .icon { - color: white; + color: var(--color-white); font-size: 17px; } .notifi-wrapper { padding: 25px; - color: #111517; + color: var(--color-black); text-align: center; } @@ -177,9 +184,9 @@ button { .header { position: relative; - background: white; + background: var(--color-white); padding: 1.25rem 0; - box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 15px var(--shadow-light); transition: 0.2s linear; } @@ -208,7 +215,7 @@ button { .header .theme-toggle { gap: 0.625rem; font-size: 14px; - color: #111517; + color: var(--color-black); transition: 0.2s linear; } @@ -228,82 +235,125 @@ button { } body.dark-theme { - background-color: #202c37; - color: white; + background-color: var(--color-dark-gray); + color: var(--color-white); } body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4 { - color: white; + color: var(--color-white); } body.dark-theme .header { - background: #2b3945; + background: var(--color-darker-gray); } body.dark-theme .header .theme-toggle { - color: white; + color: var(--color-white); } body.dark-theme .filters .search-icon { - color: white; + color: var(--color-white); } body.dark-theme .filters .search-input { - color: white; - background-color: #2b3945; + color: var(--color-white); + background-color: var(--color-darker-gray); } body.dark-theme .filters .search-input::placeholder { - color: white; + color: var(--color-white); } body.dark-theme .filters .dropdown-header, body.dark-theme .filters .dropdown-body { - background: #2b3945; + background: var(--color-darker-gray); } body.dark-theme .filters .dropdown-body li:hover { - background-color: #354555; + background-color: var(--color-dark-blue); } body.dark-theme .countries-grid .country { - color: white; - background: #2b3945; + color: var(--color-white); + background: var(--color-darker-gray); } body.dark-theme .countries-grid .country span { - color: white; + color: var(--color-white); } body.dark-theme .loader { - background-color: #202c37; + background-color: var(--color-dark-gray); } body.dark-theme .loader .spinner .icon { - color: white; + color: var(--color-white); } body.dark-theme .scroll-top { - background-color: #2b3945; + background-color: var(--color-darker-gray); } body.dark-theme .notifi-wrapper { - color: white; + color: var(--color-white); } body.dark-theme .btn { - background-color: #2b3945; - color: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + background-color: var(--color-darker-gray); + color: var(--color-white); + box-shadow: 0 0 10px var(--shadow-hover); } body.dark-theme .country-info li { - color: #858585; + color: var(--color-medium-gray); } body.dark-theme .country-info strong { - color: white; + color: var(--color-white); } + +.button-all-countries { + padding: 10px 20px; + font-size: 16px; + color: var(--color-text-dark); + background-color: var(--color-white); + border: 1px solid var(--color-border-gray); + border-radius: 5px; + box-shadow: 0 2px 5px var(--shadow-medium); + cursor: pointer; + transition: all 0.3s ease; +} + +.button-all-countries:hover { + border-color: var(--color-border-hover-gray); + box-shadow: 0 4px 10px var(--shadow-hover); + transform: translateY(-2px); +} + +.button-all-countries:active { + box-shadow: 0 2px 5px var(--shadow-medium); + transform: translateY(0); + background-color: var(--color-button-hover); +} + +body.dark-theme .button-all-countries { + color: var(--color-white); + background-color: var(--color-darker-gray); + border: 1px solid var(--color-dark-blue); + box-shadow: 0 2px 10px var(--shadow-dark); +} + +body.dark-theme .button-all-countries:hover { + border-color: var(--color-dark-blue); + box-shadow: 0 4px 15px var(--shadow-extra-dark); + transform: translateY(-2px); +} + +body.dark-theme .button-all-countries:active { + box-shadow: 0 2px 5px var(--shadow-dark); + transform: translateY(0); + background-color: var(--color-dark-blue); +} \ No newline at end of file diff --git a/src/assets/css/details.css b/src/assets/css/details.css index 6108d5b..2ef32c2 100644 --- a/src/assets/css/details.css +++ b/src/assets/css/details.css @@ -1,9 +1,17 @@ +:root { + --color-primary: #111517; + --color-warning: #d21034; + --color-secondary: #2b3945; + --shadow-light: rgba(0, 0, 0, 0.08); + --shadow-medium: rgba(0, 0, 0, 0.11); +} + body { font-size: 16px; } .btn:hover { - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.11); + box-shadow: 0 4px 20px var(--shadow-medium); } .btn.btn-back { @@ -46,7 +54,7 @@ body { width: 450px; max-width: 450px; max-height: 350px; - box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 15px var(--shadow-light); overflow: hidden; margin-right: 70px; border-radius: 6px; @@ -70,22 +78,22 @@ body { } .country-info h1 { - color: #111517; + color: var(--color-primary); margin-bottom: 30px; } .country-info strong { text-transform: capitalize; - color: #111517; + color: var(--color-primary); } .country-info strong.warning { - color: #d21034 !important; + color: var(--color-warning) !important; } .country-info li { text-transform: capitalize; - color: #2b3945; + color: var(--color-secondary); } .country-info li button { @@ -132,4 +140,4 @@ body { align-items: inherit; gap: 8px; flex-wrap: wrap; -} +} \ No newline at end of file diff --git a/src/assets/css/index.css b/src/assets/css/index.css new file mode 100644 index 0000000..7fc2722 --- /dev/null +++ b/src/assets/css/index.css @@ -0,0 +1,91 @@ +#root { + line-height: 1.5; + font-weight: 400; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 100%; + height: 100%; +} + +html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow-x: hidden; + scroll-behavior: smooth; + font-size: 100%; +} + +:root { + --color-primary: #646cff; + --color-primary-hover: #535bf2; + --color-light-hover: #747bff; + --color-dark-bg: #1a1a1a; + --color-light-bg: #f9f9f9; + --color-text-light: #213547; + --color-white: #ffffff; + --focus-outline-color: -webkit-focus-ring-color; +} + +a { + font-weight: 500; + color: var(--color-primary); + text-decoration: inherit; +} + +a:hover { + color: var(--color-primary-hover); +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: var(--color-dark-bg); + cursor: pointer; + transition: border-color 0.25s; +} + +button:hover { + border-color: var(--color-primary); +} + +button:focus, +button:focus-visible { + outline: 4px auto var(--focus-outline-color); +} + +@media (prefers-color-scheme: light) { + :root { + color: var(--color-text-light); + background-color: var(--color-white); + width: 100%; + } + + a:hover { + color: var(--color-light-hover); + } + + button { + background-color: var(--color-light-bg); + } +} \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index f51ac8b..a178cb4 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -1,3 +1,5 @@ + + .filters { margin: 40px 0 50px 0; } @@ -147,6 +149,9 @@ .countries-grid { display: grid; gap: 50px; + padding: 0 5% 5%; + + } .countries-grid.no-grid { diff --git a/src/assets/CountriesData.json b/src/assets/json/CountriesData.json similarity index 91% rename from src/assets/CountriesData.json rename to src/assets/json/CountriesData.json index 3db67ea..456916c 100644 --- a/src/assets/CountriesData.json +++ b/src/assets/json/CountriesData.json @@ -1,5 +1,6 @@ [ { + "id": 1, "name": "Åland Islands", "flag": "https://flagcdn.com/w320/ax.png", "population": 21225, @@ -7,6 +8,7 @@ "capital": "Mariehamn" }, { + "id": 2, "name": "Afghanistan", "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png", "population": 27657145, @@ -14,6 +16,7 @@ "capital": "Kabul" }, { + "id": 3, "name": "Albania", "flag": "https://flagcdn.com/w320/al.png", "population": 2886026, @@ -21,6 +24,7 @@ "capital": "Tirana" }, { + "id": 4, "name": "Algeria", "flag": "https://flagcdn.com/w320/dz.png", "population": 40400000, @@ -28,6 +32,7 @@ "capital": "Algiers" }, { + "id": 5, "name": "American Samoa", "flag": "https://flagcdn.com/w320/as.png", "population": 57100, @@ -35,6 +40,7 @@ "capital": "Pago Pago" }, { + "id": 6, "name": "Andorra", "flag": "https://flagcdn.com/w320/ad.png", "population": 78014, @@ -42,6 +48,7 @@ "capital": "Andorra la Vella" }, { + "id": 7, "name": "Angola", "flag": "https://flagcdn.com/w320/ao.png", "population": 25868000, @@ -49,6 +56,7 @@ "capital": "Luanda" }, { + "id": 8, "name": "Anguilla", "flag": "https://flagcdn.com/w320/ai.png", "population": 13452, @@ -56,6 +64,7 @@ "capital": "The Valley" }, { + "id": 9, "name": "Antarctica", "flag": "https://flagcdn.com/w320/aq.png", "population": 1000, @@ -63,6 +72,7 @@ "capital": "" }, { + "id": 10, "name": "Israel", "flag": "https://flagcdn.com/w320/il.png", "population": 8527400, @@ -70,6 +80,7 @@ "capital": "Jerusalem" }, { + "id": 11, "name": "Italy", "flag": "https://flagcdn.com/w320/it.png", "population": 60665551, @@ -77,6 +88,7 @@ "capital": "Rome" }, { + "id": 12, "name": "Jamaica", "flag": "https://flagcdn.com/w320/jm.png", "population": 2723246, @@ -84,6 +96,7 @@ "capital": "Kingston" }, { + "id": 13, "name": "Japan", "flag": "https://flagcdn.com/w320/jp.png", "population": 126960000, @@ -91,6 +104,7 @@ "capital": "Tokyo" }, { + "id": 14, "name": "Jersey", "flag": "https://flagcdn.com/w320/je.png", "population": 100800, @@ -98,6 +112,7 @@ "capital": "Saint Helier" }, { + "id": 15, "name": "Jordan", "flag": "https://flagcdn.com/w320/jo.png", "population": 9531712, @@ -105,6 +120,7 @@ "capital": "Amman" }, { + "id": 16, "name": "Kazakhstan", "flag": "https://flagcdn.com/w320/kz.png", "population": 17753200, @@ -112,6 +128,7 @@ "capital": "Astana" }, { + "id": 17, "name": "Kenya", "flag": "https://flagcdn.com/w320/ke.png", "population": 47251000, @@ -119,6 +136,7 @@ "capital": "Nairobi" }, { + "id": 18, "name": "Kiribati", "flag": "https://flagcdn.com/w320/ki.png", "population": 113400, @@ -126,6 +144,7 @@ "capital": "South Tarawa" }, { + "id": 19, "name": "Kuwait", "flag": "https://flagcdn.com/w320/kw.png", "population": 4183658, @@ -133,6 +152,7 @@ "capital": "Kuwait City" }, { + "id": 20, "name": "Kyrgyzstan", "flag": "https://flagcdn.com/w320/kg.png", "population": 6047800, @@ -140,6 +160,7 @@ "capital": "Bishkek" }, { + "id": 21, "name": "Laos", "flag": "https://flagcdn.com/w320/la.png", "population": 6492400, @@ -147,6 +168,7 @@ "capital": "Vientiane" }, { + "id": 22, "name": "Latvia", "flag": "https://flagcdn.com/w320/lv.png", "population": 1961600, @@ -154,6 +176,7 @@ "capital": "Riga" }, { + "id": 23, "name": "Lebanon", "flag": "https://flagcdn.com/w320/lb.png", "population": 5988000, @@ -161,6 +184,7 @@ "capital": "Beirut" }, { + "id": 24, "name": "Lesotho", "flag": "https://flagcdn.com/w320/ls.png", "population": 1894194, @@ -168,6 +192,7 @@ "capital": "Maseru" }, { + "id": 25, "name": "Liberia", "flag": "https://flagcdn.com/w320/lr.png", "population": 4615000, @@ -175,6 +200,7 @@ "capital": "Monrovia" }, { + "id": 26, "name": "Libya", "flag": "https://flagcdn.com/w320/ly.png", "population": 6385000, @@ -182,6 +208,7 @@ "capital": "Tripoli" }, { + "id": 27, "name": "Liechtenstein", "flag": "https://flagcdn.com/w320/li.png", "population": 37623, @@ -189,6 +216,7 @@ "capital": "Vaduz" }, { + "id": 28, "name": "Lithuania", "flag": "https://flagcdn.com/w320/lt.png", "population": 2872294, @@ -196,6 +224,7 @@ "capital": "Vilnius" }, { + "id": 29, "name": "Luxembourg", "flag": "https://flagcdn.com/w320/lu.png", "population": 576200, diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Country.jsx b/src/components/Country.jsx index 177580c..cda2674 100644 --- a/src/components/Country.jsx +++ b/src/components/Country.jsx @@ -1,10 +1,28 @@ -import React from 'react' +import 'react' -const Country = () => { - return ( - // TODO: Country component -
Country
- ) -} +/** + * Country Component + * Displays a country's flag, name, population, region, and capital. + * + * Props: + * - country: { flag, name, population, region, capital } + */ +const Country = ({ country: { flag, name, population, region, capital } }) => { + return ( + <> +
+ {name} +
+
+

{name}

+
    +
  • Population: {population}
    • +
  • Region: {region}
    • +
  • Capital: {capital}
    • +
+
+ + ); +}; -export default Country \ No newline at end of file +export default Country; \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx new file mode 100644 index 0000000..8ee2ea3 --- /dev/null +++ b/src/components/Header.jsx @@ -0,0 +1,26 @@ +import 'react' +import Logo from "./Logo.jsx"; +import ThemeToggle from "./ThemeToggle.jsx"; + + +/** + * Header Component + * Displays the header with a logo and a theme toggle button. + * + * Props: + * - theme: Current theme ("light" or "dark"). + * - toggleTheme: Function to toggle between themes. + */ +const Header = ({theme, toggleTheme}) => { + + return ( +
+
+ + +
+
+ ) +} + +export default Header diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx new file mode 100644 index 0000000..785b39c --- /dev/null +++ b/src/components/Logo.jsx @@ -0,0 +1,19 @@ +import 'react' + +/** + * Logo Component + * Displays the site logo as a clickable link. + * + * Functionality: + * - Redirects to "index.html" on click. + */ +const Logo = () => { + + return ( + +

Where in the world?

+ + ) +} + +export default Logo \ No newline at end of file diff --git a/src/components/RegionFilter.jsx b/src/components/RegionFilter.jsx new file mode 100644 index 0000000..018baee --- /dev/null +++ b/src/components/RegionFilter.jsx @@ -0,0 +1,43 @@ +import 'react'; +import {useState} from "react"; + +/** + * RegionFilter Component + * Displays a dropdown menu for filtering by region. + * + * Props: + * - action: Function to handle the selection of a region. + * + * Functionality: + * - Toggles the dropdown menu open and closed. + * - Calls the provided `action` function when a region is clicked. + */ +const RegionFilter = ({action}) => { + const [isOpen, setIsOpen] = useState(false); + + + const toggleDropdown = () => { + setIsOpen(!isOpen); + } + + const regions = ["All", "Africa", "Americas", "Asia", "Europe", "Oceania"]; + + + return ( +
+
+ Filter by Region + +
+
+
    + {regions.map((region) => ( +
  • {region}
    • + ))} +
+
+
+ ); +}; + +export default RegionFilter; \ No newline at end of file diff --git a/src/components/SearchBox.jsx b/src/components/SearchBox.jsx new file mode 100644 index 0000000..dc818d3 --- /dev/null +++ b/src/components/SearchBox.jsx @@ -0,0 +1,27 @@ +import 'react'; +/** + * SearchBox Component + * A search input field with an accompanying icon for filtering countries. + * + * Props: + * - action: Function triggered on input change to handle search functionality. + * + * Functionality: + * - Calls the `action` function whenever the user types in the input field. + */ +const SearchBox = ({action}) => { + + return ( +
+ + +
+ ); +}; + +export default SearchBox; \ No newline at end of file diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx new file mode 100644 index 0000000..4b3a3d4 --- /dev/null +++ b/src/components/ThemeToggle.jsx @@ -0,0 +1,23 @@ +import 'react'; +/** + * ThemeToggle Component + * Button to switch between light and dark themes. + * + * Props: + * - theme: Current theme ("light" or "dark"). + * - toggleTheme: Function to toggle the theme. + */ +const ThemeToggle = ({theme, toggleTheme}) => { + const isDarkTheme = theme === "dark"; + return ( + + ); +}; +export default ThemeToggle; \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 6119ad9..0000000 --- a/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.jsx b/src/main.jsx index b9a1a6d..c0721fa 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,8 +1,9 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -import './index.css' +import './assets/css/index.css' import App from './App.jsx' + createRoot(document.getElementById('root')).render( diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx deleted file mode 100644 index 507e0c5..0000000 --- a/src/pages/Home.jsx +++ /dev/null @@ -1,12 +0,0 @@ -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) -
Home
- ); -}; - -export default Home;