mate-academy · bcheban · May 17, 2026 · May 17, 2026 · May 18, 2026 · May 18, 2026
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -3,7 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+
+  <link rel="icon" type="image/png" href="./icons/favicon.svg" />
+    <title>Nice Gadgets</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,18 +7,28 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@reduxjs/toolkit": "^2.11.2",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
+    "i18next": "^26.0.8",
+    "lodash.debounce": "^4.0.8",
+    "normalize-scss": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-i18next": "^17.0.6",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^6.25.1",
-    "react-transition-group": "^4.4.5"
+    "react-select": "^5.10.2",
+    "react-transition-group": "^4.4.5",
+    "sonner": "^2.0.7",
+    "swiper": "^12.1.3"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

diff --git a/public/fonts/Mont-Bold.ttf b/public/fonts/Mont-Bold.ttf
diff --git a/public/fonts/Mont-Regular.ttf b/public/fonts/Mont-Regular.ttf
diff --git a/public/fonts/Mont-SemiBold.ttf b/public/fonts/Mont-SemiBold.ttf
diff --git a/public/icons/favicon.svg b/public/icons/favicon.svg
diff --git a/public/icons/logo-icon.svg b/public/icons/logo-icon.svg
diff --git a/public/images/banner-slider-1-desktop.png b/public/images/banner-slider-1-desktop.png
diff --git a/public/images/banner-slider-1-mobile.png b/public/images/banner-slider-1-mobile.png
diff --git a/public/images/banner-slider-2-desktop.png b/public/images/banner-slider-2-desktop.png
diff --git a/public/images/banner-slider-2-mobile.png b/public/images/banner-slider-2-mobile.png
diff --git a/public/images/banner-slider-3-desktop.png b/public/images/banner-slider-3-desktop.png
diff --git a/public/images/banner-slider-3-mobile.png b/public/images/banner-slider-3-mobile.png
diff --git a/public/img/cart-is-empty.png → public/images/cart-empty.png b/public/img/cart-is-empty.png → public/images/cart-empty.png
diff --git a/public/images/category-accessories-desktop.png b/public/images/category-accessories-desktop.png
diff --git a/public/images/category-phones-desktop.png b/public/images/category-phones-desktop.png
diff --git a/public/images/category-tablets-desktop.png b/public/images/category-tablets-desktop.png
diff --git a/public/images/checkout-cart.png b/public/images/checkout-cart.png
diff --git a/public/images/error.png b/public/images/error.png
diff --git a/public/images/favourites-empty.png b/public/images/favourites-empty.png
diff --git a/public/images/loading.png b/public/images/loading.png
diff --git a/public/img/page-not-found.png → public/images/page-not-found.png b/public/img/page-not-found.png → public/images/page-not-found.png
diff --git a/public/img/product-not-found.png → public/images/product-not-found.png b/public/img/product-not-found.png → public/images/product-not-found.png
diff --git a/public/img/banner-accessories.png b/public/img/banner-accessories.png
diff --git a/public/img/banner-phones.png b/public/img/banner-phones.png
diff --git a/public/img/banner-tablets.png b/public/img/banner-tablets.png
diff --git a/public/img/category-accessories.png b/public/img/category-accessories.png
diff --git a/public/img/category-accessories.webp b/public/img/category-accessories.webp
diff --git a/public/img/category-phones.png b/public/img/category-phones.png
diff --git a/public/img/category-phones.webp b/public/img/category-phones.webp
diff --git a/public/img/category-tablets.png b/public/img/category-tablets.png
diff --git a/public/img/category-tablets.webp b/public/img/category-tablets.webp
diff --git a/public/img/picthree.bdd2e0fc.png b/public/img/picthree.bdd2e0fc.png
diff --git a/setup.md b/setup.md
@@ -155,7 +155,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: [20.x]
+          node-version: "12.x"
       - run: npm ci
       - run: npm run build
       - name: Deploy

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,26 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+// @ts-expect-error why this goes crazy
+import 'swiper/css';
+// @ts-expect-error why this goes crazy
+import 'swiper/css/navigation';
+// @ts-expect-error why this goes crazy
+import 'swiper/css/pagination';
+
+import './styles/index.scss';
+import { store } from './store';
+import { Router } from './Router';
+import './i18n/i18n';
+
 import './App.scss';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+const App: React.FC = () => {
+  return (
+    <Provider store={store}>
+      <Router />
+    </Provider>
+  );
+};
+
+export default App;
diff --git a/src/Router/Router.tsx b/src/Router/Router.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { HashRouter, Route, Routes } from 'react-router-dom';
+import { MainLayout } from '../modules/shared/templates/MainLayout/MainLayout';
+import { CatalogPage } from '../modules/CatalogPage';
+import { HomePage } from '../modules/HomePage';
+import { FavouritesPage } from '../modules/FavouritesPage';
+import { CartPage } from '../modules/CartPage';
+import { NotFoundPage } from '../modules/NotFoundPage';
+import { ProductPage } from '../modules/ProductPage';
+import { ScrollToTop } from './ScrollToTop';
+
+export const Router: React.FC = () => (
+  <HashRouter>
+    <ScrollToTop />
+
+    <Routes>
+      <Route element={<MainLayout />}>
+        <Route index element={<HomePage />} />
+        <Route path="/phones" element={<CatalogPage category="phones" />} />
+        <Route path="/tablets" element={<CatalogPage category="tablets" />} />
+        <Route
+          path="/accessories"
+          element={<CatalogPage category="accessories" />}
+        />
+        <Route path="/cart" element={<CartPage />} />
+        <Route path="/favourites" element={<FavouritesPage />} />
+        <Route path="/product/:productId" element={<ProductPage />} />
+
+        <Route path="*" element={<NotFoundPage />} />
+      </Route>
+    </Routes>
+  </HashRouter>
+);
diff --git a/src/Router/ScrollToTop.tsx b/src/Router/ScrollToTop.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [pathname]);
+
+  return null;
+};
diff --git a/src/Router/index.tsx b/src/Router/index.tsx
@@ -0,0 +1 @@
+export * from './Router';
diff --git a/src/assets/icons/arrow-icon.tsx b/src/assets/icons/arrow-icon.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const ArrowIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.4715 3.52861C10.2111 3.26826 9.78903 3.26826 9.52868 3.52861L5.52868 7.52861C5.26833 7.78896 5.26833 8.21107 5.52868 8.47141L9.52868 12.4714C9.78903 12.7318 10.2111 12.7318 10.4715 12.4714C10.7318 12.2111 10.7318 11.789 10.4715 11.5286L6.94289 8.00001L10.4715 4.47141C10.7318 4.21107 10.7318 3.78896 10.4715 3.52861Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/close-icon.tsx b/src/assets/icons/close-icon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const CloseIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.4716 4.4714C12.7319 4.21105 12.7319 3.78894 12.4716 3.52859C12.2112 3.26824 11.7891 3.26824 11.5288 3.52859L8.00016 7.05719L4.47157 3.52859C4.21122 3.26824 3.78911 3.26824 3.52876 3.52859C3.26841 3.78894 3.26841 4.21105 3.52876 4.4714L7.05735 7.99999L3.52876 11.5286C3.26841 11.7889 3.26841 12.211 3.52876 12.4714C3.78911 12.7317 4.21122 12.7317 4.47157 12.4714L8.00016 8.9428L11.5288 12.4714C11.7891 12.7317 12.2112 12.7317 12.4716 12.4714C12.7319 12.211 12.7319 11.7889 12.4716 11.5286L8.94297 7.99999L12.4716 4.4714Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/gear-icon.tsx b/src/assets/icons/gear-icon.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const GearIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.0002 8C9.79111 8 8.00024 9.79086 8.00024 12C8.00024 14.2091 9.79111 16 12.0002 16C14.2094 16 16.0002 14.2091 16.0002 12C16.0002 9.79086 14.2094 8 12.0002 8ZM10.0002 12C10.0002 10.8954 10.8957 10 12.0002 10C13.1048 10 14.0002 10.8954 14.0002 12C14.0002 13.1046 13.1048 14 12.0002 14C10.8957 14 10.0002 13.1046 10.0002 12Z"
+      fill="currentColor"
+    ></path>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.2867 0.5C9.88583 0.5 8.6461 1.46745 8.37171 2.85605L8.29264 3.25622C8.10489 4.20638 7.06195 4.83059 6.04511 4.48813L5.64825 4.35447C4.32246 3.90796 2.83873 4.42968 2.11836 5.63933L1.40492 6.83735C0.67773 8.05846 0.954349 9.60487 2.03927 10.5142L2.35714 10.7806C3.12939 11.4279 3.12939 12.5721 2.35714 13.2194L2.03927 13.4858C0.954349 14.3951 0.67773 15.9415 1.40492 17.1626L2.11833 18.3606C2.83872 19.5703 4.3225 20.092 5.64831 19.6455L6.04506 19.5118C7.06191 19.1693 8.1049 19.7935 8.29264 20.7437L8.37172 21.1439C8.6461 22.5325 9.88584 23.5 11.2867 23.5H12.7136C14.1146 23.5 15.3543 22.5325 15.6287 21.1438L15.7077 20.7438C15.8954 19.7936 16.9384 19.1693 17.9553 19.5118L18.3521 19.6455C19.6779 20.092 21.1617 19.5703 21.8821 18.3606L22.5955 17.1627C23.3227 15.9416 23.046 14.3951 21.9611 13.4858L21.6432 13.2194C20.8709 12.5722 20.8709 11.4278 21.6432 10.7806L21.9611 10.5142C23.046 9.60489 23.3227 8.05845 22.5955 6.83732L21.8821 5.63932C21.1617 4.42968 19.678 3.90795 18.3522 4.35444L17.9552 4.48814C16.9384 4.83059 15.8954 4.20634 15.7077 3.25617L15.6287 2.85616C15.3543 1.46751 14.1146 0.5 12.7136 0.5H11.2867ZM10.3338 3.24375C10.4149 2.83334 10.7983 2.5 11.2867 2.5H12.7136C13.2021 2.5 13.5855 2.83336 13.6666 3.24378L13.7456 3.64379C14.1791 5.83811 16.4909 7.09167 18.5935 6.38353L18.9905 6.24984C19.4495 6.09527 19.9394 6.28595 20.1637 6.66264L20.8771 7.86064C21.0946 8.22587 21.0208 8.69271 20.6764 8.98135L20.3586 9.24773C18.6325 10.6943 18.6325 13.3057 20.3586 14.7523L20.6764 15.0186C21.0208 15.3073 21.0946 15.7741 20.8771 16.1394L20.1637 17.3373C19.9394 17.714 19.4495 17.9047 18.9905 17.7501L18.5936 17.6164C16.4909 16.9082 14.1791 18.1618 13.7456 20.3562L13.6666 20.7562C13.5855 21.1666 13.2021 21.5 12.7136 21.5H11.2867C10.7983 21.5 10.4149 21.1667 10.3338 20.7562L10.2547 20.356C9.82113 18.1617 7.50931 16.9082 5.40665 17.6165L5.0099 17.7501C4.55092 17.9047 4.06104 17.714 3.83671 17.3373L3.1233 16.1393C2.9058 15.7741 2.97959 15.3073 3.32398 15.0186L3.64185 14.7522C5.36782 13.3056 5.36781 10.6944 3.64185 9.24779L3.32398 8.98137C2.97959 8.69273 2.9058 8.2259 3.1233 7.86067L3.83674 6.66266C4.06106 6.28596 4.55093 6.09528 5.0099 6.24986L5.40676 6.38352C7.50938 7.09166 9.82112 5.83819 10.2547 3.64392L10.3338 3.24375Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);
diff --git a/src/assets/icons/header-logo-icon.tsx b/src/assets/icons/header-logo-icon.tsx
diff --git a/src/assets/icons/heart-counter-icon.tsx b/src/assets/icons/heart-counter-icon.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const HeartCounterIcon = () => (
+  <svg
+    width="28"
+    height="28"
+    viewBox="0 0 28 28"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      fill="currentColor"
+      clipRule="evenodd"
+      d="M15.6285 7.63137C16.1584 7.4118 16.7264 7.29878 17.3 7.29878C17.8737 7.29878 18.4416 7.4118 18.9716 7.63137C19.5015 7.85094 19.983 8.17277 20.3885 8.57847C20.7941 8.98394 21.1158 9.46532 21.3353 9.99514C21.5549 10.5251 21.6679 11.0931 21.6679 11.6667C21.6679 12.2403 21.5549 12.8083 21.3353 13.3382C21.1158 13.8681 20.794 14.3495 20.3884 14.755C20.3883 14.755 20.3884 14.7549 20.3884 14.755L14.495 20.6483C14.2217 20.9217 13.7784 20.9217 13.5051 20.6483L7.61174 14.755C6.79267 13.9359 6.33252 12.825 6.33252 11.6667C6.33252 10.5083 6.79267 9.39743 7.61174 8.57836C8.43081 7.75929 9.54171 7.29914 10.7 7.29914C11.8584 7.29914 12.9693 7.75929 13.7884 8.57836L14 8.79005L14.2116 8.57847C14.2117 8.57844 14.2116 8.57851 14.2116 8.57847C14.6171 8.17283 15.0986 7.85092 15.6285 7.63137ZM19.3983 9.56819C19.1228 9.29256 18.7957 9.07392 18.4357 8.92474C18.0756 8.77556 17.6898 8.69878 17.3 8.69878C16.9103 8.69878 16.5245 8.77556 16.1644 8.92474C15.8044 9.07392 15.4773 9.29256 15.2018 9.56819L14.495 10.275C14.2217 10.5483 13.7784 10.5483 13.5051 10.275L12.7984 9.56831C12.2419 9.01179 11.4871 8.69914 10.7 8.69914C9.91301 8.69914 9.15821 9.01179 8.60169 9.56831C8.04517 10.1248 7.73252 10.8796 7.73252 11.6667C7.73252 12.4537 8.04517 13.2085 8.60169 13.765L14 19.1634L19.3984 13.765C19.674 13.4895 19.8928 13.1623 20.042 12.8023C20.1911 12.4423 20.2679 12.0564 20.2679 11.6667C20.2679 11.277 20.1911 10.8911 20.042 10.531C19.8928 10.171 19.6739 9.84369 19.3983 9.56819Z"
+    />
+    <circle cx="21" cy="7" r="6.5" fill="#EB5757" stroke="#0F1121" />
+  </svg>
+);
diff --git a/src/assets/icons/heart-filled-icon.tsx b/src/assets/icons/heart-filled-icon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const HeartFilledIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="#EB5757"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3 1.29878C10.7264 1.29878 10.1584 1.4118 9.62852 1.63137C9.09865 1.85092 8.61711 2.17283 8.21162 2.57847L8.00005 2.79005L7.78835 2.57836C6.96928 1.75929 5.85839 1.29914 4.70005 1.29914C3.54171 1.29914 2.43081 1.75929 1.61174 2.57836C0.792668 3.39743 0.33252 4.50833 0.33252 5.66667C0.33252 6.82501 0.792668 7.9359 1.61174 8.75497L7.50507 14.6483C7.77844 14.9217 8.22165 14.9217 8.49502 14.6483L14.3884 8.75497C14.794 8.34949 15.1158 7.86806 15.3353 7.33819C15.5549 6.80827 15.6679 6.24028 15.6679 5.66667C15.6679 5.09305 15.5549 4.52506 15.3353 3.99514C15.1158 3.46532 14.7941 2.98394 14.3885 2.57847C13.983 2.17277 13.5015 1.85094 12.9716 1.63137C12.4416 1.4118 11.8737 1.29878 11.3 1.29878Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/heart-icon.tsx b/src/assets/icons/heart-icon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export const HeartIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      fill="currentColor"
+      clipRule="evenodd"
+      // eslint-disable-next-line max-len
+      d="M9.62852 1.63137C10.1584 1.41179 10.7264 1.29878 11.3 1.29878C11.8737 1.29878 12.4416 1.41179 12.9716 1.63137C13.5015 1.85094 13.983 2.17277 14.3885 2.57847C14.7941 2.98393 15.1158 3.46532 15.3353 3.99514C15.5549 4.52506 15.6679 5.09305 15.6679 5.66666C15.6679 6.24027 15.5549 6.80827 15.3353 7.33819C15.1158 7.86806 14.794 8.34949 14.3884 8.75497C14.3883 8.75501 14.3884 8.75493 14.3884 8.75497L8.49502 14.6483C8.22165 14.9217 7.77844 14.9217 7.50507 14.6483L1.61174 8.75497C0.792668 7.9359 0.33252 6.825 0.33252 5.66666C0.33252 4.50832 0.792668 3.39743 1.61174 2.57836C2.43081 1.75928 3.54171 1.29914 4.70005 1.29914C5.85839 1.29914 6.96928 1.75928 7.78835 2.57836L8.00005 2.79005L8.21162 2.57847C8.21158 2.57851 8.21166 2.57843 8.21162 2.57847C8.61711 2.17283 9.09865 1.85092 9.62852 1.63137ZM13.3983 3.56819C13.1228 3.29256 12.7957 3.07391 12.4357 2.92474C12.0756 2.77556 11.6898 2.69878 11.3 2.69878C10.9103 2.69878 10.5245 2.77556 10.1644 2.92474C9.80441 3.07391 9.4773 3.29256 9.2018 3.56819L8.49502 4.27497C8.22165 4.54834 7.77844 4.54834 7.50507 4.27497L6.7984 3.5683C6.24189 3.01179 5.48708 2.69914 4.70005 2.69914C3.91301 2.69914 3.15821 3.01179 2.60169 3.5683C2.04517 4.12482 1.73252 4.87963 1.73252 5.66666C1.73252 6.4537 2.04517 7.2085 2.60169 7.76502L8.00005 13.1634L13.3984 7.76502C13.674 7.48952 13.8928 7.1623 14.042 6.80228C14.1911 6.44225 14.2679 6.05637 14.2679 5.66666C14.2679 5.27696 14.1911 4.89107 14.042 4.53105C13.8928 4.17102 13.6739 3.84369 13.3983 3.56819Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/home-icon.tsx b/src/assets/icons/home-icon.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const HomeIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.59087 0.807088C7.83161 0.619846 8.16872 0.619846 8.40946 0.807088L14.4095 5.47375C14.5718 5.60006 14.6668 5.79426 14.6668 5.99999V13.3333C14.6668 13.8638 14.4561 14.3725 14.081 14.7475C13.706 15.1226 13.1973 15.3333 12.6668 15.3333H3.3335C2.80306 15.3333 2.29436 15.1226 1.91928 14.7475C1.54421 14.3725 1.3335 13.8638 1.3335 13.3333V5.99999C1.3335 5.79426 1.42848 5.60006 1.59087 5.47375L7.59087 0.807088ZM2.66683 6.32605V13.3333C2.66683 13.5101 2.73707 13.6797 2.86209 13.8047C2.98712 13.9298 3.15669 14 3.3335 14H12.6668C12.8436 14 13.0132 13.9298 13.1382 13.8047C13.2633 13.6797 13.3335 13.5101 13.3335 13.3333V6.32605L8.00016 2.1779L2.66683 6.32605Z"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.3335 8.00001C5.3335 7.63182 5.63197 7.33334 6.00016 7.33334H10.0002C10.3684 7.33334 10.6668 7.63182 10.6668 8.00001V14.6667C10.6668 15.0349 10.3684 15.3333 10.0002 15.3333C9.63197 15.3333 9.3335 15.0349 9.3335 14.6667V8.66668H6.66683V14.6667C6.66683 15.0349 6.36835 15.3333 6.00016 15.3333C5.63197 15.3333 5.3335 15.0349 5.3335 14.6667V8.00001Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/menu-icon.tsx b/src/assets/icons/menu-icon.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const MenuIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 4.5C1 4.08579 1.39175 3.75 1.875 3.75H14.125C14.6082 3.75 15 4.08579 15 4.5C15 4.91421 14.6082 5.25 14.125 5.25H1.875C1.39175 5.25 1 4.91421 1 4.5Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1 8C1 7.58579 1.39175 7.25 1.875 7.25H14.125C14.6082 7.25 15 7.58579 15 8C15 8.41421 14.6082 8.75 14.125 8.75H1.875C1.39175 8.75 1 8.41421 1 8Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1.875 10.75C1.39175 10.75 1 11.0858 1 11.5C1 11.9142 1.39175 12.25 1.875 12.25H14.125C14.6082 12.25 15 11.9142 15 11.5C15 11.0858 14.6082 10.75 14.125 10.75H1.875Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/minus-icon.tsx b/src/assets/icons/minus-icon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const MinusIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.6665 7.99999C2.6665 7.63181 2.96498 7.33333 3.33317 7.33333H12.6665C13.0347 7.33333 13.3332 7.63181 13.3332 7.99999C13.3332 8.36818 13.0347 8.66666 12.6665 8.66666H3.33317C2.96498 8.66666 2.6665 8.36818 2.6665 7.99999Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/moon-icon.tsx b/src/assets/icons/moon-icon.tsx
@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const MoonIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8.0696 15.3621H7.99445C6.96389 15.3543 5.94525 15.1408 4.99818 14.7343C4.05111 14.3277 3.19466 13.7363 2.47897 12.9945C1.15183 11.5749 0.397421 9.71392 0.361342 7.77068C0.325262 5.82744 1.01007 3.9397 2.2836 2.47179C3.10407 1.55206 4.13552 0.845337 5.28931 0.41234C5.42394 0.360522 5.57063 0.34856 5.71187 0.377882C5.85311 0.407203 5.98293 0.47657 6.08583 0.577698C6.18112 0.674899 6.24823 0.796164 6.27999 0.928544C6.31176 1.06092 6.30698 1.19945 6.26617 1.32932C5.85435 2.45746 5.77276 3.67968 6.03097 4.85257C6.28918 6.02546 6.87647 7.10036 7.72394 7.95113C8.57931 8.79621 9.65648 9.38167 10.8307 9.63973C12.005 9.89779 13.2283 9.81789 14.3591 9.40928C14.4936 9.36189 14.6389 9.35381 14.7779 9.38598C14.917 9.41815 15.0439 9.48924 15.144 9.59095C15.2441 9.69265 15.3132 9.82076 15.3432 9.96029C15.3732 10.0998 15.3628 10.245 15.3134 10.3789C14.9295 11.4039 14.3299 12.3344 13.555 13.1073C12.8343 13.826 11.9786 14.3953 11.0373 14.7822C10.0959 15.1692 9.08735 15.3663 8.0696 15.3621ZM4.43268 2.5244C4.05522 2.7892 3.70976 3.09692 3.40323 3.44138C2.36966 4.62605 1.81277 6.15243 1.84053 7.72452C1.8683 9.29661 2.47876 10.8024 3.55351 11.9498C4.131 12.5497 4.82287 13.0278 5.58823 13.3557C6.35358 13.6836 7.17689 13.8547 8.00948 13.8589H8.0696C9.06614 13.8583 10.0482 13.62 10.9342 13.1638C11.8203 12.7076 12.5848 12.0466 13.1643 11.2357C11.9833 11.3888 10.783 11.2691 9.65544 10.8858C8.52792 10.5024 7.50324 9.86575 6.66008 9.02455C5.81693 8.18336 5.17775 7.16006 4.79162 6.03324C4.4055 4.90643 4.28271 3.70609 4.43268 2.5244Z" />
+  </svg>
+);
diff --git a/src/assets/icons/plus-icon.tsx b/src/assets/icons/plus-icon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const PlusIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.6665 3.33334C8.6665 2.96515 8.36803 2.66667 7.99984 2.66667C7.63165 2.66667 7.33317 2.96515 7.33317 3.33334V7.33334H3.33317C2.96498 7.33334 2.6665 7.63182 2.6665 8.00001C2.6665 8.3682 2.96498 8.66667 3.33317 8.66667H7.33317V12.6667C7.33317 13.0349 7.63165 13.3333 7.99984 13.3333C8.36803 13.3333 8.6665 13.0349 8.6665 12.6667V8.66667H12.6665C13.0347 8.66667 13.3332 8.3682 13.3332 8.00001C13.3332 7.63182 13.0347 7.33334 12.6665 7.33334H8.6665V3.33334Z"
+    />
+  </svg>
+);
diff --git a/src/assets/icons/search-icon.tsx b/src/assets/icons/search-icon.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export const SearchIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.66683 7.33334C2.66683 4.75601 4.75617 2.66668 7.3335 2.66668C9.91083 2.66668 12.0002 4.75601 12.0002 7.33334C12.0002 8.59061 11.503 9.73176 10.6945 10.5709C10.6716 10.5884 10.6497 10.6077 10.6287 10.6286C10.6078 10.6495 10.5886 10.6715 10.571 10.6943C9.73189 11.5028 8.59075 12 7.3335 12C4.75617 12 2.66683 9.91067 2.66683 7.33334ZM11.0786 12.0213C10.0522 12.8424 8.75016 13.3333 7.3335 13.3333C4.01979 13.3333 1.3335 10.6471 1.3335 7.33334C1.3335 4.01963 4.01979 1.33334 7.3335 1.33334C10.6472 1.33334 13.3335 4.01963 13.3335 7.33334C13.3335 8.75003 12.8425 10.052 12.0214 11.0785L14.4715 13.5286C14.7319 13.789 14.7319 14.2111 14.4715 14.4714C14.2112 14.7318 13.7891 14.7318 13.5287 14.4714L11.0786 12.0213Z"
+    />
+  </svg>
+);