completed tasks

src/App.scss

@@ -1 +1,39 @@
-// not empty
+// not empty
+.App {
+  min-height: 100vh;
+  margin: 0;
+  background-color: #0f1121;
+  display: flex;
+  flex-direction: column;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('../fonts/Mont-Regular.otf') format('opentype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('../fonts/Mont-SemiBold.otf') format('opentype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: Mont;
+  src: url('../fonts/Mont-Bold.otf') format('opentype');
+  font-weight: 700;
+}
+
+.main {
+  background-color: #0f1121;
+  width: 100%;
+  flex: 1 0 auto;
+}
+

src/App.tsx

@@ -1,7 +1,65 @@
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import './App.scss';
+import { Header } from './components/Header/Header';
+import { CatalogPage } from './components/CatalogPage';
+import { getAccessories, getPhones, getTablets } from './api';
+import { HomePage } from './components/HomePage/HomePage';
+import { FavoritesPage } from './components/FavoritesPage/FavoritesPage';
+import { CartPage } from './components/CartPage/CartPage';
+// eslint-disable-next-line max-len
+import { ProductDetailsPage } from './components/ProductDeatils/ProductDetailsPage';
+import { NotFoundPage } from './components/NotFoundPage/NotFoundPage';
+import { Footer } from './components/Footer/Footer';
 
 export const App = () => (
   <div className="App">
-    <h1>Product Catalog</h1>
+    <Header />
+
+    <main className="main">
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/home" element={<Navigate to="/" replace />} />
+        <Route
+          path="/phones"
+          element={
+            <CatalogPage
+              breadcrumbLabel="Phones"
+              emptyMessage="There are no phones yet"
+              fetchProducts={getPhones}
+              title="Mobile phones"
+            />
+          }
+        />
+        <Route
+          path="/tablets"
+          element={
+            <CatalogPage
+              breadcrumbLabel="Tablets"
+              emptyMessage="There are no tablets yet"
+              fetchProducts={getTablets}
+              title="Tablets"
+            />
+          }
+        />
+        <Route
+          path="/accessories"
+          element={
+            <CatalogPage
+              breadcrumbLabel="Accessories"
+              emptyMessage="There are no accessories yet"
+              fetchProducts={getAccessories}
+              title="Accessories"
+            />
+          }
+        />
+        <Route path="/favorites" element={<FavoritesPage />} />
+        <Route path="/cart" element={<CartPage />} />
+        <Route path="/product/:productId" element={<ProductDetailsPage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </main>
+
+    <Footer />
   </div>
 );

src/api.ts

@@ -0,0 +1,66 @@
+import { Product } from './types/Product';
+import { ProductDetails } from './types/ProductDetails';
+
+const BASE_URL = import.meta.env.BASE_URL;
+
+const getProductDetailsByPath = (path: string): Promise<ProductDetails[]> =>
+  fetch(`${BASE_URL}/${path}`).then(response => response.json());
+
+const getProductsByCategory = (
+  category: Product['category'],
+): Promise<Product[]> => {
+  return fetch(`${BASE_URL}/api/products.json`)
+    .then(response => response.json())
+    .then((products: Product[]) =>
+      products.filter(product => product.category === category),
+    );
+};
+
+export const getAllProducts = (): Promise<Product[]> => {
+  return fetch(`${BASE_URL}/api/products.json`).then(response =>
+    response.json(),
+  );
+};
+
+export const getPhones = (): Promise<Product[]> =>
+  getProductsByCategory('phones');
+
+export const getTablets = (): Promise<Product[]> =>
+  getProductsByCategory('tablets');
+
+export const getAccessories = (): Promise<Product[]> =>
+  getProductsByCategory('accessories');
+
+export const getProductVariants = async (
+  category: ProductDetails['category'],
+  namespaceId: string,
+): Promise<ProductDetails[]> => {
+  const products = await getProductDetailsByPath(`api/${category}.json`);
+
+  return products.filter(product => product.namespaceId === namespaceId);
+};
+
+export const getProductById = async (
+  productId: string,
+): Promise<ProductDetails | undefined> => {
+  const [phones, tablets, accessories] = await Promise.all([
+    getProductDetailsByPath('api/phones.json'),
+    getProductDetailsByPath('api/tablets.json'),
+    getProductDetailsByPath('api/accessories.json'),
+  ]);
+
+  const allProducts: ProductDetails[] = [...phones, ...tablets, ...accessories];
+
+  return allProducts.find(product => product.id === productId);
+};
+
+export const getSuggestedProducts = async (
+  currentItemId: string,
+): Promise<Product[]> => {
+  const products = await getAllProducts();
+
+  return products
+    .filter(product => product.itemId !== currentItemId)
+    .sort(() => Math.random() - 0.5)
+    .slice(0, 10);
+};

src/components/BurgerMenu/BurgerMenu.module.scss

@@ -0,0 +1,114 @@
+.menu {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  background-color: #0f1121;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  border-bottom: 1px solid #323542;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: 16px;
+}
+
+.logoImage {
+  width: 64px;
+  height: 22px;
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 0;
+  border-left: 1px solid #323542;
+  background: transparent;
+  cursor: pointer;
+}
+
+.closeIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.nav {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  padding-top: 32px;
+}
+
+.navLink {
+  position: relative;
+  color: #75767f;
+  font-family: Mont, sans-serif;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 11px;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.navLinkActive {
+  color: #f1f2f9;
+}
+
+.navLinkActive::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -10px;
+  left: 0;
+  height: 2px;
+  background-color: #f1f2f9;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  border-top: 1px solid #323542;
+}
+
+.actionLink {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px;
+  border-left: 1px solid #323542;
+  background: transparent;
+}
+
+.actionLink:first-child {
+  border-left: 0;
+}
+
+.actionLinkActive {
+  box-shadow: inset 0 -2px 0 #f1f2f9;
+}
+
+.actionIcon {
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-width: 640px) {
+  .menu {
+    display: none;
+  }
+}

src/components/BurgerMenu/BurgerMenu.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import styles from './BurgerMenu.module.scss';
+import close from './components/img/Close.png';
+import logo from '../Header/components/img/logo.png';
+import favourites from '../Header/components/img/favourites.png';
+import bag from '../Header/components/img/bag.png';
+
+interface Props {
+  onClose: () => void;
+}
+
+export const BurgerMenu: React.FC<Props> = ({ onClose }) => {
+  const getNavLinkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink;
+
+  const getActionLinkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive
+      ? `${styles.actionLink} ${styles.actionLinkActive}`
+      : styles.actionLink;
+
+  return (
+    <div className={styles.menu}>
+      <div className={styles.top}>
+        <NavLink to="/" className={styles.logo} onClick={onClose}>
+          <img className={styles.logoImage} src={logo} alt="Nice Gadgets" />
+        </NavLink>
+
+        <button
+          className={styles.closeButton}
+          type="button"
+          onClick={onClose}
+          aria-label="Close menu"
+        >
+          <img src={close} className={styles.closeIcon} alt="" />
+        </button>
+      </div>
+
+      <nav className={styles.nav}>
+        <NavLink to="/" end className={getNavLinkClass} onClick={onClose}>
+          Home
+        </NavLink>
+        <NavLink to="/phones" className={getNavLinkClass} onClick={onClose}>
+          Phones
+        </NavLink>
+        <NavLink to="/tablets" className={getNavLinkClass} onClick={onClose}>
+          Tablets
+        </NavLink>
+        <NavLink
+          to="/accessories"
+          className={getNavLinkClass}
+          onClick={onClose}
+        >
+          Accessories
+        </NavLink>
+      </nav>
+
+      <div className={styles.actions}>
+        <NavLink
+          to="/favorites"
+          className={getActionLinkClass}
+          onClick={onClose}
+          aria-label="Go to favourites"
+        >
+          <img src={favourites} alt="" className={styles.actionIcon} />
+        </NavLink>
+
+        <NavLink
+          to="/cart"
+          className={getActionLinkClass}
+          onClick={onClose}
+          aria-label="Go to cart"
+        >
+          <img src={bag} alt="" className={styles.actionIcon} />
+        </NavLink>
+      </div>
+    </div>
+  );
+};