├── next.config.js
├── public
    └── favicon.ico
├── .eslintrc
├── src
    ├── pages
    │   ├── _app.js
    │   ├── index.js
    │   └── country
    │   │   ├── Country.module.css
    │   │   └── [id].js
    ├── components
    │   ├── layout
    │   │   ├── Layout.module.css
    │   │   └── Layout.js
    │   ├── searchBar
    │   │   ├── SearchBar.module.css
    │   │   └── SearchBar.js
    │   └── countries
    │   │   ├── Countries.js
    │   │   └── Countries.module.css
    └── styles
    │   └── globals.css
├── .gitignore
├── package.json
└── README.md


/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 |  
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EsrafilElahi/next-world-ranks/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next", 
 4 |     "next/core-web-vitals"
 5 |   ],
 6 |   "rules": {
 7 |     "@next/next/no-img-element": "off"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | 
4 | function MyApp({ Component, pageProps }) {
5 |   return <Component {...pageProps} />
6 | }
7 | 
8 | export default MyApp
9 | 


--------------------------------------------------------------------------------
/src/components/layout/Layout.module.css:
--------------------------------------------------------------------------------
 1 | .layout_container {
 2 |   padding: 20px;
 3 |   margin: 0 auto;
 4 |   height: 100vh;
 5 | }
 6 | 
 7 | .layout_header {
 8 |   display: flex;
 9 |   justify-content: center;
10 |   align-items: center;
11 |   cursor: pointer;
12 | }
13 | 
14 | .layout_footer {
15 |   display: flex;
16 |   justify-content: center;
17 |   align-items: flex-end;
18 |   font-size: 17px;
19 |   padding: 30px 0;
20 |   margin-top: -10px;
21 | }
22 | 
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-world-ranks",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@material-ui/core": "^4.12.1",
13 |     "@material-ui/icons": "^4.11.2",
14 |     "next": "11.0.1",
15 |     "react": "17.0.2",
16 |     "react-dom": "17.0.2",
17 |     "react-toggle": "^4.1.2"
18 |   },
19 |   "devDependencies": {
20 |     "eslint": "7.30.0",
21 |     "eslint-config-next": "11.0.1"
22 |   }
23 | }


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import Head from 'next/head'
 3 | import Layout from '../components/layout/Layout';
 4 | import SearchBar from './../components/searchBar/SearchBar';
 5 | import Countries from './../components/countries/Countries';
 6 | 
 7 | 
 8 | export default function Home({data}) {
 9 |   const [search, setSearch] = useState('')
10 | 
11 |   const HandleChange = (e) => {
12 |     e.preventDefault()
13 |     setSearch(e.target.value.toLowerCase())
14 |   }
15 | 
16 |   const filtereddata = data.filter(country => (
17 |     country.name.toLowerCase().includes(search) ||
18 |     country.region.toLowerCase().includes(search)
19 |   ))
20 | 
21 |   return (
22 |     <Layout>
23 |       <Head>
24 |         <title>World Ranks</title>
25 |         <link rel="icon" href="/favicon.ico" />
26 |       </Head>
27 |       <SearchBar placeholder='Search By Name, Region' onChange={HandleChange} />
28 |       <Countries data={filtereddata} />
29 |     </Layout>
30 |   )
31 | }
32 | 
33 | 
34 | export const getStaticProps = async () => {
35 |   const res = await fetch('https://restcountries.eu/rest/v2/all')
36 |   const data = await res.json()
37 | 
38 |   return {
39 |     props: { data }
40 |   }
41 | }


--------------------------------------------------------------------------------
/src/components/searchBar/SearchBar.module.css:
--------------------------------------------------------------------------------
 1 | .search_container {
 2 |   display: flex;
 3 |   justify-content: center !important;
 4 |   padding: 30px;
 5 |   margin-top: 40px;
 6 |   margin-bottom: 20px;
 7 | }
 8 | 
 9 | .search_toggle {
10 |   display: flex;
11 |   padding: 10px;
12 | }
13 | 
14 | .search_wrapper {
15 |   display: flex;
16 |   align-items: center;
17 |   background-color: var(--background-color-dark);
18 |   border-radius: 8px;
19 |   padding-left: 16px;
20 | 
21 |   color: var(--text-color-secondary);
22 | }
23 | 
24 | .search_input {
25 |   border: none;
26 |   background-color: transparent;
27 |   width: 250px;
28 |   height: 100%;
29 |   outline: none;
30 |   font-size: 13px;
31 | }
32 | 
33 | .search_input::placeholder {
34 |   color: var(--text-color-secondary);
35 | }
36 | 
37 | /* Media Query */
38 | 
39 | @media screen and (max-width: 992px) {
40 |   .search_input::placeholder {
41 |     font-size: 14px;
42 |   }
43 |   .search_input {
44 |     font-size: 14px;
45 |   }
46 | }
47 | 
48 | @media screen and (min-width: 992px) {
49 |   .search_input::placeholder {
50 |     font-size: 18px;
51 |   }
52 |   .search_input {
53 |     font-size: 18px;
54 |   }
55 |   .search_toggle {
56 |     margin-right: 10px;
57 |   }
58 | }
59 | 
60 | @media screen and (min-width: 1200px) {
61 |   .search_input::placeholder {
62 |     font-size: 19px;
63 |   }
64 |   .search_input {
65 |     font-size: 19px;
66 |   }
67 |   .search_toggle {
68 |     margin-right: 15px;
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/searchBar/SearchBar.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import styles from './SearchBar.module.css'
 3 | import Toggle from 'react-toggle'
 4 | import "react-toggle/style.css"
 5 | 
 6 | 
 7 | function SearchBar({ ...rest }) {
 8 | 
 9 |     const [theme, setTheme] = useState('light')
10 | 
11 |     const handleTheme = () => {
12 |         if (theme === 'light') {
13 |             setTheme('dark')
14 |             document.documentElement.setAttribute('data-theme', 'dark')
15 |         }
16 |         else {
17 |             setTheme('light')
18 |             document.documentElement.setAttribute('data-theme', 'light')
19 |         }
20 |     }
21 | 
22 |     return (
23 |         <div className={styles.search_container}>
24 |             <div className={styles.search_toggle}>
25 |                 <label>
26 |                     <Toggle
27 |                         onChange={handleTheme}
28 |                         className={styles.search_toggle_custom}
29 |                         icons={{
30 |                             checked: <div style={{ fontSize: '15px', marginTop: '5px' }}>🔅</div>,
31 |                             unchecked: <div style={{ fontSize: '13px', marginTop: '5px' }}>🌙</div>,
32 |                         }}
33 |                     />
34 |                 </label>
35 |             </div>
36 |             <div className={styles.search_wrapper}>
37 |                 <input className={styles.search_input} {...rest} />
38 |             </div>
39 |         </div>
40 |     )
41 | }
42 | 
43 | export default SearchBar
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | 
14 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
15 | 
16 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
17 | 
18 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
19 | 
20 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
21 | 
22 | ## Learn More
23 | 
24 | To learn more about Next.js, take a look at the following resources:
25 | 
26 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
27 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
28 | 
29 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
30 | 
31 | ## Deploy on Vercel
32 | 
33 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
34 | 
35 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
36 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Imbue:wght@300&family=Roboto+Condensed:wght@300&display=swap");
 2 | 
 3 | html,
 4 | body {
 5 |   padding: 0;
 6 |   margin: 0;
 7 |   font-family: "Imbue", "san-serif";
 8 |   letter-spacing: 0.5px;
 9 |   background-color: var(--background-color);
10 |   color: var(--text-color);
11 | }
12 | 
13 | /* Light Mode */
14 | :root {
15 |   --text-color: #124a63;
16 |   --text-color-secondary: #b3c5cd;
17 | 
18 |   --primary-color: #21b6b7;
19 | 
20 |   --background-color: #f9f9f9;
21 |   --background-color-dark: #eef3f6;
22 |   --background-color-light: white;
23 | 
24 |   --font-family: "Poppins", sans-serif;
25 |   --box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
26 | }
27 | 
28 | /* Dark Mode */
29 | [data-theme="dark"] {
30 |   --text-color: #f0f0f0;
31 |   --text-color-secondary: #b3c5cd;
32 | 
33 |   --primary-color: #21b6b7;
34 | 
35 |   --background-color: #252329;
36 |   --background-color-dark: #3c393f;
37 |   --background-color-light: #120f13;
38 | }
39 | 
40 | a {
41 |   color: inherit;
42 |   text-decoration: none;
43 | }
44 | 
45 | * {
46 |   box-sizing: border-box;
47 |   color: inherit;
48 |   font: inherit;
49 |   letter-spacing: 1px;
50 | }
51 | 
52 | .react-toggle-track-check {
53 |   left: 4px !important;
54 | }
55 | 
56 | .react-toggle-track-x {
57 |   top: -2px !important;
58 |   right: 12px !important;
59 | }
60 | 
61 | .react-toggle--checked .react-toggle-track {
62 |   background-color: var(--text-color-secondary) !important;
63 | }
64 | 
65 | .react-toggle--checked .react-toggle-thumb {
66 |   left: 27px;
67 |   border-color: white !important;
68 | }
69 | 
70 | .react-toggle--focus .react-toggle-thumb {
71 |   box-shadow: 0px 0px 0px 0px #fff !important;
72 | }
73 | 
74 | .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
75 |   box-shadow: 0px 0px 0px 0px #fff !important;
76 | }
77 | 


--------------------------------------------------------------------------------
/src/pages/country/Country.module.css:
--------------------------------------------------------------------------------
  1 | .detail_container {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   padding: 35px 20px;
  5 |   background-color: var(--background-color);
  6 | }
  7 | 
  8 | .detail_flag {
  9 |   display: flex;
 10 |   flex-direction: column;
 11 |   background-color: var(--background-color-light);
 12 |   box-shadow: var(--box-shadow);
 13 |   padding: 20px 20px 1px 20px;
 14 |   border-radius: 8px;
 15 | }
 16 | 
 17 | .detail_flag img {
 18 |   width: 100%;
 19 |   border-radius: 3px;
 20 | }
 21 | 
 22 | .detail_flag_title {
 23 |   text-align: center;
 24 | }
 25 | 
 26 | .detail_flag_title h1 {
 27 |   font-size: 32px;
 28 |   letter-spacing: 2px;
 29 | }
 30 | 
 31 | .detail_flag_title p {
 32 |   color: var(--text-color-secondary);
 33 |   font-size: 17px;
 34 |   font-weight: 300;
 35 | }
 36 | 
 37 | .detail_detail {
 38 |   margin-top: 40px;
 39 |   background-color: var(--background-color-light);
 40 |   box-shadow: var(--box-shadow);
 41 | }
 42 | 
 43 | .detail_capital,
 44 | .detail_language,
 45 | .detail_population,
 46 | .detail_area,
 47 | .detail_native_name,
 48 | .detail_currency {
 49 |   display: flex;
 50 |   justify-content: space-between;
 51 |   padding: 5px 20px;
 52 |   border-bottom: 1px solid #e0e0e0;
 53 | }
 54 | 
 55 | .detail_label {
 56 |   color: var(--text-color-secondary);
 57 | }
 58 | 
 59 | /* Media Query */
 60 | @media screen and (min-width: 768px) {
 61 |   .detail_container {
 62 |     display: flex;
 63 |     flex-direction: row;
 64 |     align-items: center;
 65 |     padding: 10px;
 66 |   }
 67 |   .detail_flag {
 68 |     flex: 1;
 69 |     margin-right: 17px;
 70 |     display: flex;
 71 |     align-items: center;
 72 |   }
 73 |   .detail_detail {
 74 |     flex: 1;
 75 |     margin-left: 17px;
 76 |   }
 77 |   .detail_flag img {
 78 |     height: 14rem;
 79 |   }
 80 | }
 81 | 
 82 | @media screen and (min-width: 992px) {
 83 |   .detail_container {
 84 |     padding-top: 50px;
 85 |   }
 86 |   .detail_flag {
 87 |     flex: 1.5;
 88 |     margin-right: 17px;
 89 |   }
 90 |   .detail_detail {
 91 |     flex: 2;
 92 |     margin-left: 17px;
 93 |   }
 94 | }
 95 | 
 96 | @media screen and (min-width: 1200px) {
 97 |   .detail_container {
 98 |     display: flex;
 99 |     flex-direction: row;
100 |     align-items: center;
101 |     justify-content: center;
102 |     padding: 30px;
103 |   }
104 |   .detail_flag {
105 |     flex: 1;
106 |     margin-right: 17px;
107 |   }
108 |   .detail_detail {
109 |     flex: 2;
110 |     margin-left: 17px;
111 |   }
112 |   .detail_flag img {
113 |     height: 14rem;
114 |   }
115 | }
116 | 


--------------------------------------------------------------------------------
/src/pages/country/[id].js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Layout from './../../components/layout/Layout';
 3 | import styles from './Country.module.css'
 4 | 
 5 | 
 6 | export const getStaticPaths = async () => {
 7 |     const res = await fetch("https://restcountries.eu/rest/v2/all");
 8 |     const countries = await res.json();
 9 | 
10 |     const paths = countries.map((country) => ({
11 |         params: { id: country.alpha3Code },
12 |     }));
13 | 
14 |     return {
15 |         paths,
16 |         fallback: false,
17 |     };
18 | };
19 | 
20 | export const getStaticProps = async (context) => {
21 |     const id = context.params.id
22 |     const res = await fetch(`https://restcountries.eu/rest/v2/alpha/${id}`);
23 |     const country = await res.json()
24 | 
25 |     return {
26 |         props: { country }
27 |     }
28 | }
29 | 
30 | 
31 | function Country({ country }) {
32 | 
33 |     return (
34 |         <>
35 |             <Layout>
36 |                 
37 |                 <Head>
38 |                     <title>{country.name}</title>
39 |                     <link rel="icon" href={country.flag} />
40 |                 </Head>
41 | 
42 |                 <div className={styles.detail_container}>
43 | 
44 |                     <div className={styles.detail_flag}>
45 |                         <div className={styles.detail_flag_img}>
46 |                             <img src={country.flag} alt={country.name} />
47 |                         </div>
48 |                         <div className={styles.detail_flag_title}>
49 |                             <h1>{country.name}</h1>
50 |                             <p>{country.region}</p>
51 |                         </div>
52 |                     </div>
53 | 
54 |                     <div className={styles.detail_detail}>
55 |                         <div className={styles.detail_capital}>
56 |                             <h4 className={styles.detail_label}>Capital</h4>
57 |                             <h4>{country.capital}</h4>
58 |                         </div>
59 |                         <div className={styles.detail_language}>
60 |                             <h4 className={styles.detail_label}>Language</h4>
61 |                             <h4>{country.languages.map(({ name }) => name).join(", ")}</h4>
62 |                         </div>
63 |                         <div className={styles.detail_population}>
64 |                             <h4 className={styles.detail_label}>Population</h4>
65 |                             <h4>{country.population}</h4>
66 |                         </div>
67 |                         <div className={styles.detail_area}>
68 |                             <h4 className={styles.detail_label}>Area (km<sup style={{ fontSize: '.5rem' }}>2</sup>)</h4>
69 |                             <h4>{country.area}</h4>
70 |                         </div>
71 |                         <div className={styles.detail_native_name}>
72 |                             <h4 className={styles.detail_label}>NativeName</h4>
73 |                             <h4>{country.nativeName}</h4>
74 |                         </div>
75 |                         <div className={styles.detail_currency}>
76 |                             <h4 className={styles.detail_label}>Currency</h4>
77 |                             <h4>{country.currencies.map(cur => cur.code)}</h4>
78 |                         </div>
79 |                     </div>
80 | 
81 |                 </div>
82 |             </Layout>
83 |         </>
84 |     )
85 | }
86 | 
87 | export default Country
88 | 


--------------------------------------------------------------------------------
/src/components/countries/Countries.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import Link from 'next/link'
 3 | import styles from './Countries.module.css'
 4 | import { KeyboardArrowDownRounded, KeyboardArrowUpRounded } from "@material-ui/icons";
 5 | 
 6 | 
 7 | const orderData = (data, value, direction) => {
 8 |     if (direction === 'asc') {
 9 |         return [...data].sort((a, b) => a[value] > b[value] ? 1 : -1)
10 |     }
11 |     if (direction === 'desc') {
12 |         return [...data].sort((a, b) => a[value] > b[value] ? -1 : 1)
13 |     }
14 | 
15 |     return data
16 | }
17 | 
18 | const Arrow = ({ direction }) => {
19 |     if (!direction) return;
20 |     else if (direction === 'asc') {
21 |         return (
22 |             <div className={styles.arrow}>
23 |                 <KeyboardArrowUpRounded color="inherit" />
24 |             </div>
25 |         )
26 |     } else {
27 |         return (
28 |             <div className={styles.arrow}>
29 |                 <KeyboardArrowDownRounded color="inherit" />
30 |             </div>
31 |         )
32 |     }
33 | }
34 | 
35 | function Countries({ data }) {
36 | 
37 |     const [direction, setDirection] = useState()
38 |     const [value, setValue] = useState('')
39 |     const orderedData = orderData(data, value, direction)
40 | 
41 |     const setDirectionAndValue = (value) => {
42 |         if (!direction) {
43 |             setDirection('desc')
44 |         } else if (direction === 'desc') {
45 |             setDirection('asc')
46 |         } else {
47 |             setDirection(null)
48 |         }
49 | 
50 |         setValue(value)
51 |     }
52 | 
53 | 
54 |     return (
55 |         <>
56 |             <div className={styles.country_container}>
57 |                 <div className={styles.country_header}>
58 |                     <div className={styles.country_flag}></div>
59 |                     <button onClick={() => setDirectionAndValue('name')} className={styles.country_name}>
60 |                         <div>Name</div>
61 |                         {value === 'name' ? <Arrow direction={direction} /> : null}
62 |                     </button>
63 |                     <button onClick={() => setDirectionAndValue('population')} className={styles.country_population}>
64 |                         <div>Population</div>
65 |                         {value === 'population' ? <Arrow direction={direction} /> : null}
66 |                     </button>
67 |                     <button onClick={() => setDirectionAndValue('area')} className={styles.country_area}>
68 |                         <div>Area(km<sup style={{ fontSize: '.5rem' }}>2</sup>)</div>
69 |                         {value === 'area' && <Arrow direction={direction} />}
70 |                     </button>
71 |                 </div>
72 |                 {
73 |                     orderedData.map(country => (
74 |                         <Link passHref href={`/country/${country.alpha3Code}`} key={country.name}>
75 |                             <div className={styles.row_header}>
76 |                                 <div className={styles.row_flag}>
77 |                                     <img src={country.flag} alt={country.name} />
78 |                                 </div>
79 |                                 <div className={styles.row_name}>{country.name}</div>
80 |                                 <div className={styles.row_population}>{country.population}</div>
81 |                                 <div className={styles.row_area}>{country.area || 0}</div>
82 |                             </div>
83 |                         </Link>
84 |                     ))
85 |                 }
86 |             </div>
87 |         </>
88 |     )
89 | }
90 | 
91 | export default Countries
92 | 


--------------------------------------------------------------------------------
/src/components/countries/Countries.module.css:
--------------------------------------------------------------------------------
  1 | .country_header {
  2 |   display: flex;
  3 |   justify-content: center;
  4 |   align-items: center;
  5 |   padding: 15px;
  6 | }
  7 | 
  8 | .country_header button {
  9 |   border: none;
 10 |   background-color: transparent;
 11 |   outline: none;
 12 |   cursor: pointer;
 13 | }
 14 | 
 15 | .country_flag {
 16 |   display: flex;
 17 |   flex: 1;
 18 | }
 19 | 
 20 | .country_name {
 21 |   flex: 3;
 22 |   color: var(--text-color-secondary);
 23 |   margin-left: 13px;
 24 |   font-weight: 500;
 25 |   display: flex;
 26 |   justify-content: flex-start;
 27 |   align-items: center;
 28 | }
 29 | 
 30 | .country_population {
 31 |   flex: 3;
 32 |   color: var(--text-color-secondary);
 33 |   font-weight: 500;
 34 |   display: flex;
 35 |   justify-content: center;
 36 |   align-items: center;
 37 | }
 38 | 
 39 | .country_area {
 40 |   flex: 3;
 41 |   color: var(--text-color-secondary);
 42 |   font-weight: 500;
 43 |   display: flex;
 44 |   justify-content: center;
 45 |   align-items: center;
 46 | }
 47 | 
 48 | .row_header {
 49 |   display: flex;
 50 |   padding: 15px;
 51 |   text-align: center;
 52 |   background-color: var(--background-color-light);
 53 |   border-radius: 8px;
 54 |   margin-bottom: 16px;
 55 |   box-shadow: var(--box-shadow);
 56 |   font-weight: 500;
 57 |   cursor: pointer;
 58 |   transition: box-shadow 0.2s ease-in-out;
 59 | }
 60 | 
 61 | .row_header:hover {
 62 |   box-shadow: 2px 3px 6px rgba(33, 183, 151, 0.6);
 63 | }
 64 | 
 65 | .row_flag {
 66 |   flex: 1;
 67 |   margin-right: 16px;
 68 |   display: flex;
 69 |   align-items: center;
 70 |   justify-content: flex-start;
 71 | }
 72 | 
 73 | .row_flag img {
 74 |   width: 100%;
 75 |   border-radius: 2px;
 76 | }
 77 | 
 78 | .row_name {
 79 |   flex: 3;
 80 |   text-align: left;
 81 |   display: flex;
 82 |   align-items: center;
 83 |   justify-content: flex-start;
 84 | }
 85 | 
 86 | .row_population {
 87 |   flex: 3;
 88 |   display: flex;
 89 |   align-items: center;
 90 |   justify-content: center;
 91 | }
 92 | 
 93 | .row_area {
 94 |   flex: 3;
 95 |   display: flex;
 96 |   align-items: center;
 97 |   justify-content: center;
 98 | }
 99 | 
100 | .arrow {
101 |   color: var(--text-color-secondary);
102 |   display: flex;
103 |   justify-content: center;
104 |   align-items: center;
105 |   width: 2px;
106 |   height: 2px;
107 |   margin-left: 11px;
108 |   margin-top: 2px;
109 | }
110 | 
111 | /* Media Query */
112 | 
113 | @media screen and (max-width: 992px) {
114 |   .row_flag {
115 |     flex: 1;
116 |   }
117 |   .country_container {
118 |     padding: 1rem 1rem;
119 |   }
120 | }
121 | 
122 | @media screen and (min-width: 768px) {
123 |   .country_container {
124 |     padding: 1rem 3.5rem;
125 |   }
126 | }
127 | 
128 | @media screen and (min-width: 992px) {
129 |   .row_flag {
130 |     flex: 0.7;
131 |   }
132 |   .country_name {
133 |     flex: 3;
134 |     color: var(--text-color-secondary);
135 |     margin-left: -13px;
136 |     font-weight: 500;
137 |     display: flex;
138 |     justify-content: flex-start;
139 |     align-items: center;
140 |   }
141 |   .country_header {
142 |     font-size: 20px;
143 |   }
144 |   .row_header {
145 |     font-size: 20px;
146 |   }
147 |   .country_container {
148 |     padding: 1rem 5rem;
149 |   }
150 | }
151 | 
152 | @media screen and (min-width: 1200px) {
153 |   .row_flag {
154 |     flex: 0.7;
155 |   }
156 |   .country_name {
157 |     flex: 3;
158 |     color: var(--text-color-secondary);
159 |     margin-left: -13px;
160 |     font-weight: 500;
161 |     display: flex;
162 |     justify-content: flex-start;
163 |     align-items: center;
164 |   }
165 |   .country_header {
166 |     font-size: 24px;
167 |   }
168 |   .row_header {
169 |     font-size: 24px;
170 |   }
171 |   .country_container {
172 |     padding: 1rem 10rem;
173 |   }
174 | }
175 | 


--------------------------------------------------------------------------------
/src/components/layout/Layout.js:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import styles from './Layout.module.css'
 3 | 
 4 | 
 5 | function Layout({ children, title = 'World Ranks' }) {
 6 |     return (
 7 |         <div className={styles.layout_container}>
 8 | 
 9 |             <header className={styles.layout_header}>
10 |                 <Link href="/" passHref>
11 |                     <svg
12 |                         width="175"
13 |                         height="24"
14 |                         viewBox="0 0 175 24"
15 |                         fill="none"
16 |                         xmlns="http://www.w3.org/2000/svg"
17 |                     >
18 |                         <path
19 |                             d="M32.32 20C32.048 20 31.824 19.928 31.648 19.784C31.488 19.624 31.392 19.432 31.36 19.208L28.792 3.848C28.776 3.816 28.768 3.768 28.768 3.704C28.768 3.576 28.816 3.464 28.912 3.368C29.024 3.256 29.144 3.2 29.272 3.2H32.416C32.88 3.2 33.136 3.384 33.184 3.752L34.648 12.824L36.304 7.568C36.432 7.136 36.696 6.92 37.096 6.92H38.896C39.296 6.92 39.56 7.136 39.688 7.568L41.344 12.8L42.832 3.752C42.864 3.56 42.936 3.424 43.048 3.344C43.16 3.248 43.336 3.2 43.576 3.2H46.72C46.864 3.2 46.984 3.256 47.08 3.368C47.176 3.464 47.224 3.576 47.224 3.704V3.848L44.656 19.208C44.624 19.432 44.52 19.624 44.344 19.784C44.168 19.928 43.952 20 43.696 20H41.272C41.016 20 40.816 19.936 40.672 19.808C40.528 19.68 40.432 19.536 40.384 19.376L38.008 12.728L35.632 19.376C35.568 19.536 35.464 19.68 35.32 19.808C35.176 19.936 34.976 20 34.72 20H32.32ZM54.9383 20.24C52.9223 20.24 51.3703 19.776 50.2823 18.848C49.2103 17.904 48.6263 16.568 48.5303 14.84C48.5143 14.632 48.5063 14.272 48.5063 13.76C48.5063 13.248 48.5143 12.888 48.5303 12.68C48.6263 10.984 49.2263 9.664 50.3303 8.72C51.4503 7.76 52.9863 7.28 54.9383 7.28C56.8903 7.28 58.4183 7.76 59.5223 8.72C60.6423 9.664 61.2503 10.984 61.3463 12.68C61.3783 13.096 61.3943 13.456 61.3943 13.76C61.3943 14.064 61.3783 14.424 61.3463 14.84C61.2503 16.568 60.6583 17.904 59.5703 18.848C58.4983 19.776 56.9543 20.24 54.9383 20.24ZM54.9383 17.216C55.5943 17.216 56.0823 17.016 56.4023 16.616C56.7223 16.2 56.9063 15.568 56.9543 14.72C56.9703 14.56 56.9783 14.24 56.9783 13.76C56.9783 13.28 56.9703 12.96 56.9543 12.8C56.9063 11.968 56.7223 11.344 56.4023 10.928C56.0823 10.512 55.5943 10.304 54.9383 10.304C54.2823 10.304 53.7943 10.512 53.4743 10.928C53.1543 11.344 52.9703 11.968 52.9223 12.8L52.8983 13.76L52.9223 14.72C52.9703 15.568 53.1543 16.2 53.4743 16.616C53.7943 17.016 54.2823 17.216 54.9383 17.216ZM64.2805 20C64.1205 20 63.9765 19.944 63.8485 19.832C63.7365 19.704 63.6805 19.56 63.6805 19.4V8.144C63.6805 7.968 63.7365 7.824 63.8485 7.712C63.9605 7.584 64.1045 7.52 64.2805 7.52H67.2085C67.3845 7.52 67.5285 7.584 67.6405 7.712C67.7685 7.824 67.8325 7.968 67.8325 8.144V9.056C68.2805 8.56 68.8005 8.184 69.3925 7.928C70.0005 7.656 70.6725 7.52 71.4085 7.52H72.4885C72.6645 7.52 72.8085 7.576 72.9205 7.688C73.0325 7.8 73.0885 7.944 73.0885 8.12V10.736C73.0885 10.896 73.0325 11.04 72.9205 11.168C72.8085 11.28 72.6645 11.336 72.4885 11.336H70.0645C69.4245 11.336 68.9285 11.512 68.5765 11.864C68.2405 12.216 68.0725 12.712 68.0725 13.352V19.4C68.0725 19.576 68.0085 19.72 67.8805 19.832C67.7685 19.944 67.6245 20 67.4485 20H64.2805ZM75.367 20C75.191 20 75.039 19.944 74.911 19.832C74.799 19.72 74.743 19.576 74.743 19.4V3.56C74.743 3.384 74.799 3.24 74.911 3.128C75.039 3.016 75.191 2.96 75.367 2.96H78.367C78.543 2.96 78.687 3.016 78.799 3.128C78.911 3.24 78.967 3.384 78.967 3.56V19.4C78.967 19.56 78.911 19.704 78.799 19.832C78.687 19.944 78.543 20 78.367 20H75.367ZM86.3839 20.24C84.8319 20.24 83.6079 19.752 82.7119 18.776C81.8319 17.8 81.3599 16.408 81.2959 14.6L81.2719 13.76L81.2959 12.896C81.3599 11.152 81.8399 9.784 82.7359 8.792C83.6319 7.784 84.8479 7.28 86.3839 7.28C87.8239 7.28 88.9839 7.744 89.8639 8.672V3.56C89.8639 3.384 89.9199 3.24 90.0319 3.128C90.1599 3.016 90.3039 2.96 90.4639 2.96H93.5599C93.7359 2.96 93.8799 3.016 93.9919 3.128C94.1199 3.24 94.1839 3.384 94.1839 3.56V19.4C94.1839 19.576 94.1199 19.72 93.9919 19.832C93.8799 19.944 93.7359 20 93.5599 20H90.7039C90.5439 20 90.3999 19.944 90.2719 19.832C90.1599 19.704 90.1039 19.56 90.1039 19.4V18.656C89.2399 19.712 87.9999 20.24 86.3839 20.24ZM87.7759 16.904C88.4639 16.904 88.9759 16.688 89.3119 16.256C89.6479 15.808 89.8319 15.248 89.8639 14.576C89.8959 14.128 89.9119 13.824 89.9119 13.664C89.9119 13.488 89.8959 13.192 89.8639 12.776C89.8319 12.152 89.6399 11.64 89.2879 11.24C88.9519 10.824 88.4479 10.616 87.7759 10.616C87.0559 10.616 86.5359 10.832 86.2159 11.264C85.9119 11.68 85.7359 12.264 85.6879 13.016L85.6639 13.76L85.6879 14.504C85.7359 15.256 85.9119 15.848 86.2159 16.28C86.5359 16.696 87.0559 16.904 87.7759 16.904Z"
20 |                             fill="#B9C9D1"
21 |                         />
22 |                         <path
23 |                             d="M102.818 20C102.658 20 102.514 19.944 102.386 19.832C102.274 19.704 102.218 19.56 102.218 19.4V3.824C102.218 3.648 102.274 3.504 102.386 3.392C102.498 3.264 102.642 3.2 102.818 3.2H109.418C111.53 3.2 113.178 3.68 114.362 4.64C115.562 5.6 116.162 6.952 116.162 8.696C116.162 9.816 115.898 10.768 115.37 11.552C114.858 12.336 114.146 12.944 113.234 13.376L116.474 19.232C116.522 19.328 116.546 19.416 116.546 19.496C116.546 19.624 116.498 19.744 116.402 19.856C116.306 19.952 116.186 20 116.042 20H112.658C112.194 20 111.866 19.784 111.674 19.352L109.034 14.144H106.73V19.4C106.73 19.576 106.666 19.72 106.538 19.832C106.426 19.944 106.282 20 106.106 20H102.818ZM109.394 10.616C110.082 10.616 110.602 10.448 110.954 10.112C111.322 9.76 111.506 9.28 111.506 8.672C111.506 8.064 111.322 7.576 110.954 7.208C110.602 6.84 110.082 6.656 109.394 6.656H106.73V10.616H109.394ZM122.409 20.24C121.561 20.24 120.785 20.08 120.081 19.76C119.393 19.424 118.849 18.968 118.449 18.392C118.065 17.816 117.873 17.184 117.873 16.496C117.873 15.408 118.321 14.528 119.217 13.856C120.129 13.168 121.377 12.696 122.961 12.44L125.937 11.984V11.696C125.937 11.104 125.817 10.672 125.577 10.4C125.337 10.128 124.929 9.992 124.353 9.992C124.033 9.992 123.761 10.048 123.537 10.16C123.329 10.272 123.089 10.44 122.817 10.664C122.609 10.84 122.425 10.968 122.265 11.048C122.201 11.16 122.121 11.216 122.025 11.216H119.241C119.081 11.216 118.945 11.168 118.833 11.072C118.737 10.96 118.697 10.832 118.713 10.688C118.729 10.256 118.945 9.776 119.361 9.248C119.777 8.704 120.409 8.24 121.257 7.856C122.105 7.472 123.153 7.28 124.401 7.28C126.385 7.28 127.857 7.72 128.817 8.6C129.777 9.464 130.257 10.64 130.257 12.128V19.4C130.257 19.56 130.201 19.704 130.089 19.832C129.977 19.944 129.833 20 129.657 20H126.705C126.545 20 126.401 19.944 126.273 19.832C126.161 19.704 126.105 19.56 126.105 19.4V18.56C125.753 19.056 125.265 19.464 124.641 19.784C124.017 20.088 123.273 20.24 122.409 20.24ZM123.609 17.408C124.313 17.408 124.881 17.176 125.313 16.712C125.761 16.248 125.985 15.576 125.985 14.696V14.408L123.993 14.744C122.649 15 121.977 15.48 121.977 16.184C121.977 16.552 122.129 16.848 122.433 17.072C122.753 17.296 123.145 17.408 123.609 17.408ZM133.468 20C133.308 20 133.164 19.944 133.036 19.832C132.924 19.704 132.868 19.56 132.868 19.4V8.12C132.868 7.944 132.924 7.8 133.036 7.688C133.164 7.576 133.308 7.52 133.468 7.52H136.42C136.596 7.52 136.74 7.576 136.852 7.688C136.964 7.8 137.02 7.944 137.02 8.12V9.032C137.452 8.504 138.004 8.08 138.676 7.76C139.364 7.44 140.148 7.28 141.028 7.28C141.94 7.28 142.748 7.488 143.452 7.904C144.172 8.32 144.732 8.936 145.132 9.752C145.548 10.568 145.756 11.552 145.756 12.704V19.4C145.756 19.56 145.7 19.704 145.588 19.832C145.476 19.944 145.332 20 145.156 20H141.964C141.788 20 141.636 19.944 141.508 19.832C141.396 19.72 141.34 19.576 141.34 19.4V12.848C141.34 12.128 141.164 11.576 140.812 11.192C140.476 10.808 139.98 10.616 139.324 10.616C138.684 10.616 138.18 10.816 137.812 11.216C137.444 11.6 137.26 12.144 137.26 12.848V19.4C137.26 19.56 137.204 19.704 137.092 19.832C136.98 19.944 136.836 20 136.66 20H133.468ZM149.008 20C148.832 20 148.68 19.944 148.552 19.832C148.44 19.72 148.384 19.576 148.384 19.4V3.56C148.384 3.384 148.44 3.24 148.552 3.128C148.68 3.016 148.832 2.96 149.008 2.96H151.936C152.112 2.96 152.256 3.016 152.368 3.128C152.48 3.24 152.536 3.384 152.536 3.56V11.576L155.728 7.928C155.76 7.896 155.816 7.84 155.896 7.76C155.992 7.68 156.088 7.624 156.184 7.592C156.28 7.544 156.4 7.52 156.544 7.52H159.928C160.072 7.52 160.192 7.576 160.288 7.688C160.4 7.784 160.456 7.912 160.456 8.072C160.456 8.216 160.4 8.344 160.288 8.456L156.064 13.112L160.888 19.088C161 19.232 161.056 19.352 161.056 19.448C161.056 19.608 161 19.744 160.888 19.856C160.792 19.952 160.664 20 160.504 20H157.024C156.816 20 156.656 19.968 156.544 19.904C156.448 19.84 156.328 19.736 156.184 19.592L152.536 15.08V19.4C152.536 19.56 152.48 19.704 152.368 19.832C152.256 19.944 152.112 20 151.936 20H149.008ZM167.538 20.24C166.226 20.24 165.13 20.056 164.25 19.688C163.37 19.32 162.714 18.88 162.282 18.368C161.866 17.856 161.658 17.392 161.658 16.976C161.658 16.816 161.714 16.688 161.826 16.592C161.954 16.48 162.09 16.424 162.234 16.424H165.138C165.234 16.424 165.314 16.456 165.378 16.52C165.65 16.696 165.802 16.8 165.834 16.832C166.138 17.056 166.418 17.232 166.674 17.36C166.946 17.472 167.266 17.528 167.634 17.528C168.066 17.528 168.418 17.448 168.69 17.288C168.978 17.112 169.122 16.872 169.122 16.568C169.122 16.312 169.042 16.104 168.882 15.944C168.738 15.784 168.45 15.632 168.018 15.488C167.602 15.328 166.962 15.168 166.098 15.008C163.33 14.448 161.946 13.168 161.946 11.168C161.946 10.512 162.154 9.888 162.57 9.296C163.002 8.688 163.626 8.2 164.442 7.832C165.274 7.464 166.266 7.28 167.418 7.28C168.586 7.28 169.594 7.464 170.442 7.832C171.306 8.184 171.962 8.616 172.41 9.128C172.858 9.624 173.082 10.08 173.082 10.496C173.082 10.64 173.026 10.768 172.914 10.88C172.818 10.992 172.698 11.048 172.554 11.048H169.914C169.77 11.048 169.658 11.016 169.578 10.952C169.386 10.856 169.194 10.736 169.002 10.592C168.714 10.4 168.458 10.256 168.234 10.16C168.026 10.048 167.754 9.992 167.418 9.992C167.018 9.992 166.706 10.08 166.482 10.256C166.258 10.432 166.146 10.656 166.146 10.928C166.146 11.168 166.21 11.368 166.338 11.528C166.482 11.672 166.762 11.816 167.178 11.96C167.61 12.104 168.258 12.256 169.122 12.416C170.69 12.688 171.826 13.176 172.53 13.88C173.25 14.568 173.609 15.376 173.609 16.304C173.609 17.504 173.074 18.464 172.002 19.184C170.946 19.888 169.458 20.24 167.538 20.24Z"
24 |                             fill="#21B6B7"
25 |                         />
26 |                         <rect y="15.7336" width="22" height="4.4" rx="2" fill="#21B6B7" />
27 |                         <rect
28 |                             y="9.86725"
29 |                             width="14.6667"
30 |                             height="4.4"
31 |                             rx="2"
32 |                             fill="#21B6B7"
33 |                         />
34 |                         <rect y="4" width="7.33333" height="4.4" rx="2" fill="#21B6B7" />
35 |                     </svg>
36 |                 </Link>
37 |             </header>
38 | 
39 |             <main className={styles.main}>{children}</main>
40 | 
41 |             <footer className={styles.layout_footer}>copyright 2021 Esrafil.Elahi@gmail.com</footer>
42 | 
43 |         </div>
44 |     )
45 | }
46 | 
47 | export default Layout
48 | 


--------------------------------------------------------------------------------