Develop

src/App.scss

@@ -1 +1,21 @@
-// not empty
+html {
+  position: relative;
+  scroll-behavior: smooth;
+
+  &:has(.hidden-overflow) {
+    overflow: hidden;
+  }
+
+  min-height: 100vh;
+}
+
+* button  {
+  cursor: pointer;
+}
+
+.not-visible-title {
+  display: none;
+  visibility: hidden;
+}
+
+

src/App.tsx

@@ -1,7 +1,52 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { useEffect, useState } from 'react';
+import { Desktop } from './utils/DesktopContext';
+import { Tablet } from './utils/TabletContext';
+import { Outlet } from 'react-router-dom';
+import { MenuOpen } from './utils/MenuContext';
 import './App.scss';
+import classNames from 'classnames';
+import { useWindowSize } from 'react-use';
+import Favicon from 'react-favicon';
 
-export const App = () => (
-  <div className="App">
-    <h1>Product Catalog</h1>
-  </div>
-);
+export const App = () => {
+  const [faviconUrl, setFaviconUrl] = useState('./img/favicon.png');
+
+  useEffect(() => setFaviconUrl('./img/favicon.png'), []);
+
+  const { width } = useWindowSize();
+
+  const [onTablet, setOnTablet] = useState(width >= 640);
+  const [onDesktop, setOnDesktop] = useState(width >= 1200);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (width >= 1200) {
+      setOnDesktop(true);
+      setOnTablet(false);
+      setIsMenuOpen(false);
+    } else if (width >= 640) {
+      setOnDesktop(false);
+      setOnTablet(true);
+      setIsMenuOpen(false);
+    } else {
+      setOnDesktop(false);
+      setOnTablet(false);
+    }
+  }, [width]);
+
+  return (
+    <div className={classNames('App', { 'hidden-overflow': isMenuOpen })}>
+      <Favicon url={faviconUrl} />
+      <h1 className="not-visible-title">Product Catalog</h1>
+      <Desktop.Provider value={onDesktop}>
+        <Tablet.Provider value={onTablet}>
+          <MenuOpen.Provider value={{ isMenuOpen, setIsMenuOpen }}>
+            <Outlet />
+          </MenuOpen.Provider>
+        </Tablet.Provider>
+      </Desktop.Provider>
+    </div>
+  );
+};

public/api/phones.json → src/api/phones.json

@@ -5695,12 +5695,12 @@
     "id": "apple-iphone-14-pro-256gb-gold",
     "category": "phones",
     "namespaceId": "apple-iphone-14-pro",
-    "name": "Apple iPhone 14 Pro 256GB Space Black",
+    "name": "Apple iPhone 14 Pro 256GB Gold",
     "capacityAvailable": ["128GB", "256GB", "512GB", "1TB"],
     "capacity": "256GB",
     "priceRegular": 1200,
     "priceDiscount": 1160,
-    "colorsAvailable": ["spaceblack", "gold"],
+    "colorsAvailable": ["gold", "spaceblack"],
     "color": "gold",
     "images": [
       "img/phones/apple-iphone-14-pro/gold/00.webp",

src/components/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

src/components/BasketItem/BasketItem.scss

@@ -0,0 +1,101 @@
+@import '../../utils/mixins';
+@import '../../utils/variables';
+
+.basket-item {
+  width: 100%;
+  padding: 16px;
+  border-radius: 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--elements-color);
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  @include on-tablet {
+    flex-direction: row;
+  }
+
+  &__info-box {
+    display: flex;
+    align-items: center;
+    column-gap: 31px;
+  }
+
+  &__remove-button {
+    width: 16px;
+    height: 16px;
+    background-color: var(--white-color);
+    border: none;
+  }
+
+  &__product-image {
+    width: 66px;
+    height: 66px;
+    object-fit: contain;
+  }
+
+  &__product-name {
+    font-family: var(--regular-font-family);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+    letter-spacing: 0%;
+  }
+
+  &__price-count-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 102px;
+
+    @include on-tablet {
+      column-gap: 46px;
+    }
+  }
+
+  &__count-box {
+    display: flex;
+    column-gap: 12px;
+    align-items: center;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid var(--elements-color);
+    background-color: var(--white-color);
+    width: 32px;
+    height: 32px;
+    transition: .3s;
+
+    &:hover {
+      border-color: var(--dark-gray-color);
+    }
+
+    &--disabled {
+      pointer-events: none;
+
+      &:hover {
+        border-color: var(--elements-color);
+      }
+    }
+  }
+
+  &__counter {
+    font-family: var(--regular-font-family);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+  }
+
+  &__product-price {
+    margin: 0;
+    font-family: var(--strong-font-family);
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0%;
+  }
+}