+ 
+
+ );
+ }
+}
+
+export default CardItem;
diff --git a/src/components/cardList/CardList.module.scss b/src/components/cardList/CardList.module.scss
new file mode 100644
index 0000000..83ba402
--- /dev/null
+++ b/src/components/cardList/CardList.module.scss
@@ -0,0 +1,21 @@
+.loading {
+ text-align: center;
+ padding: 2rem;
+}
+
+.card-list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+}
+
+.card-item {
+ display: flex;
+ padding: 2rem;
+ justify-content: center;
+}
+
+@media screen and (max-width: 720px) {
+ .card-list {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
diff --git a/src/components/cardList/CardList.test.tsx b/src/components/cardList/CardList.test.tsx
new file mode 100644
index 0000000..d99e1bf
--- /dev/null
+++ b/src/components/cardList/CardList.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, vi } from 'vitest';
+import { NORFOLK_ISLAND } from '../../mockData/MockData';
+import CardList from './CardList';
+
+vi.mock('./utilfunction', () => ({
+ __esModule: true,
+ result: () => Promise.resolve([NORFOLK_ISLAND]),
+}));
+
+describe('CardList', () => {
+ it('Renders Loading before getting fetch data', async () => {
+ render(
+
+ Official Name:
+ {name.official}
+
+
+ Capital:
+ {capital}
+
+
+ Area:
+ {area.toLocaleString()} km2
+
+
+ Population:
+ {population.toLocaleString()}
+
+
+ Region:
+ {region}
+
+ loading...
;
+ }
+
+ if (error) {
+ return Error occurred
;
+ }
+ return (
+
+ {cardList.map(
+ ({
+ name,
+ flags,
+ currencies,
+ capital,
+ region,
+ population,
+ area,
+ timezones,
+ }: Country) => {
+ return (
+ cardList.length > 0 && (
+
+ );
+ }
+}
+
+export default CardList;
diff --git a/src/components/cardList/utilfunction.ts b/src/components/cardList/utilfunction.ts
new file mode 100644
index 0000000..4856bd7
--- /dev/null
+++ b/src/components/cardList/utilfunction.ts
@@ -0,0 +1,16 @@
+/* eslint-disable import/prefer-default-export */
+import { Country } from '../../interfaces/interfaces';
+
+const BASE_URL =
+ 'https://restcountries.com/v3.1/all?fields=name,flags,currencies,timezones,area,capital,region,population';
+export const getData = async (url: string) => {
+ const data = await fetch(url);
+ const result = await data.json();
+ return result;
+};
+
+export const result = async () => {
+ const data = await getData(BASE_URL);
+ const filteredData = data.filter((el: Country, index: number) => index < 12);
+ return filteredData;
+};
diff --git a/src/components/countryItem/CountryName.tsx b/src/components/countryItem/CountryName.tsx
new file mode 100644
index 0000000..e78d2a2
--- /dev/null
+++ b/src/components/countryItem/CountryName.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+
+class CountryName extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default CountryName;
diff --git a/src/components/forms/Forms.tsx b/src/components/forms/Forms.tsx
new file mode 100644
index 0000000..536650d
--- /dev/null
+++ b/src/components/forms/Forms.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import CountryName from '../countryItem/CountryName';
+
+class Forms extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default Forms;
diff --git a/src/components/searchBar/SearchBar.module.scss b/src/components/searchBar/SearchBar.module.scss
new file mode 100644
index 0000000..5f0d36a
--- /dev/null
+++ b/src/components/searchBar/SearchBar.module.scss
@@ -0,0 +1,30 @@
+@import '../../index.scss';
+
+.wrapper {
+ display: flex;
+ justify-content: center;
+}
+
+.input {
+ min-width: 320px;
+ min-height: 32px;
+ font-size: 24px;
+ padding: 8px;
+ color: $color-prime;
+ border: $color-prime solid 2px;
+ border-radius: 1rem;
+ &:focus {
+ outline: none;
+ border: $color-hover solid 2px;
+ }
+}
+
+::placeholder {
+ color: $color-prime;
+ opacity: 0.5;
+}
+
+.img {
+ width: 3rem;
+ padding: 0.5rem;
+}
diff --git a/src/components/searchBar/SearchBar.test.tsx b/src/components/searchBar/SearchBar.test.tsx
new file mode 100644
index 0000000..b6780f8
--- /dev/null
+++ b/src/components/searchBar/SearchBar.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import SearchBar from './SearchBar';
+
+describe('SearchBar', () => {
+ it('Renders Icon', () => {
+ render(
+ 
+
+
+ );
+ }
+}
+
+export default SearchBar;
diff --git a/src/const.ts b/src/const.ts
new file mode 100644
index 0000000..b8befbe
--- /dev/null
+++ b/src/const.ts
@@ -0,0 +1,7 @@
+export const LINKS = {
+ Main: '/',
+ 'About Us': 'about',
+ Forms: 'forms',
+};
+
+export const SMTH = {};
diff --git a/src/hoc/withRouterHOC.tsx b/src/hoc/withRouterHOC.tsx
new file mode 100644
index 0000000..a8ba419
--- /dev/null
+++ b/src/hoc/withRouterHOC.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable react/function-component-definition */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { WithRouterProps } from '../interfaces/interfaces';
+
+const withRouter =
+
+ Current Page: {pageToDisplay || '404'}
+
+ About Us
;
+ }
+}
+
+export default AboutUs;
diff --git a/src/pages/errorPage/ErrorPage.module.scss b/src/pages/errorPage/ErrorPage.module.scss
new file mode 100644
index 0000000..f36f970
--- /dev/null
+++ b/src/pages/errorPage/ErrorPage.module.scss
@@ -0,0 +1,5 @@
+.error {
+ font-size: 2rem;
+ margin: auto;
+ text-align: center;
+}
diff --git a/src/pages/errorPage/ErrorPage.tsx b/src/pages/errorPage/ErrorPage.tsx
new file mode 100644
index 0000000..d9399a4
--- /dev/null
+++ b/src/pages/errorPage/ErrorPage.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import styles from './ErrorPage.module.scss';
+
+class ErrorPage extends React.Component {
+ render() {
+ return 404 Page not Found
;
+ }
+}
+
+export default ErrorPage;
diff --git a/src/pages/mainPage/MainPage.module.scss b/src/pages/mainPage/MainPage.module.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/pages/mainPage/MainPage.module.scss
@@ -0,0 +1 @@
+
diff --git a/src/pages/mainPage/mainPage.tsx b/src/pages/mainPage/mainPage.tsx
new file mode 100644
index 0000000..06ad108
--- /dev/null
+++ b/src/pages/mainPage/mainPage.tsx
@@ -0,0 +1,17 @@
+/* eslint-disable react/prefer-stateless-function */
+import React from 'react';
+import CardList from '../../components/cardList/CardList';
+import SearchBar from '../../components/searchBar/SearchBar';
+
+class MainPage extends React.Component {
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default MainPage;
diff --git a/src/setupTest.ts b/src/setupTest.ts
new file mode 100644
index 0000000..e3dddb2
--- /dev/null
+++ b/src/setupTest.ts
@@ -0,0 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///