add task solution

src/App.scss

@@ -1 +1,29 @@
-// not empty
+html {
+  scroll-behavior: smooth;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+ul,
+button,
+span,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  box-sizing: border-box;
+  font-family: "Mont", arial, helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 21px;
+}
+
+.container {
+  max-width: 1136px;
+  margin: 0 auto;
+}

src/App.tsx

@@ -1,8 +1,19 @@
+import { Outlet } from 'react-router-dom';
 import './App.scss';
+import { Footer } from './components/Footer/Footer';
+import { Header } from './components/Header/Header';
 
 const App = () => (
   <div className="App">
-    <h1>React Phone Catalog</h1>
+    <Header />
+
+    <main>
+      <div className="container">
+        <Outlet />
+      </div>
+    </main>
+
+    <Footer />
   </div>
 );
 

src/api/CategoriesList.json

@@ -0,0 +1,23 @@
+[
+  {
+    "title": "Mobile phones",
+    "image": "img/categories/phones.jpg",
+    "type": "phones",
+    "itemType": "phone",
+    "url": "/phones"
+  },
+  {
+    "title": "Tablets",
+    "image": "img/categories/tablets.jpg",
+    "type": "tablets",
+    "itemType": "tablet",
+    "url": "/tablets"
+  },
+  {
+    "title": "Accessories",
+    "image": "img/categories/accessories.jpg",
+    "type": "accessories",
+    "itemType": "accessory",
+    "url": "/accessories"
+  }
+]

src/api/Products.ts

@@ -0,0 +1,11 @@
+import { Product } from '../types/Product';
+import { ProductDetails } from '../types/ProductDetails';
+import { client } from '../utils/fetchClient';
+
+export const getProducts = () => {
+  return client.get<Product[]>('/products.json');
+};
+
+export const getProductDetails = (productId: string) => {
+  return client.get<ProductDetails>(`/products/${productId}.json`);
+};

src/api/navFooter.json

@@ -0,0 +1,14 @@
+[
+  {
+    "title": "Github",
+    "path": "https://github.com/NikaNika12"
+  },
+  {
+    "title": "Contacts",
+    "path": "https://github.com/NikaNika12"
+  },
+  {
+    "title": "Rights",
+    "path": "https://github.com/NikaNika12"
+  }
+]

src/api/navHeader.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Home",
+    "path": "/"
+  },
+  {
+    "title": "Phones",
+    "path": "/phones"
+  },
+  {
+    "title": "Tablets",
+    "path": "/tablets"
+  },
+  {
+    "title": "Accessories",
+    "path": "/accessories"
+  }
+]

src/components/AddToCartButton/AddToCartButton.scss

@@ -0,0 +1,38 @@
+@import "../../main.scss";
+
+.button {
+  width: 176px;
+  height: 40px;
+
+  @extend %buttons-text;
+
+  color: $color-white;
+  background-color: $color-primary;
+  border: none;
+  outline: none;
+
+  transition: box-shadow 0.5s;
+  cursor: pointer;
+
+  &--small {
+    width: 176px;
+    height: 40px;
+  }
+
+  &--big {
+    width: 100%;
+    height: 48px;
+  }
+
+  &--selected {
+    color: $color-green;
+    background: none;
+    border: 1px solid $color-elements;
+  }
+
+  &:hover {
+    color: $color-white;
+    background-color: $color-primary;
+    box-shadow: 0 3px 13px rgba(23, 32, 49, 0.26);
+  }
+}

src/components/AddToCartButton/AddToCartButton.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { useContext } from 'react';
+import { Product } from '../../types/Product';
+import { Context } from '../../context/Context';
+import './AddToCartButton.scss';
+import { ButtonType } from '../../types/ButtonType';
+
+type Props = {
+  product: Product;
+  size: ButtonType;
+};
+
+export const AddToCartButton: React.FC<Props> = ({ product, size }) => {
+  const { changeCart, cart } = useContext(Context);
+
+  const isInCart = cart.length > 0
+    ? cart.find(item => item.id === product?.id) : false;
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'button',
+        `button--${size}`,
+        {
+          'button--selected': isInCart,
+        },
+      )}
+      onClick={() => changeCart(product)}
+    >
+      {`${isInCart ? 'Added to cart' : 'Add to cart'}`}
+    </button>
+  );
+};

src/components/BackButton/BackButton.scss

@@ -0,0 +1,21 @@
+@import "../../main.scss";
+
+.backButton {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 10px 20px;
+  width: 50px;
+  height: 30px;
+  background-color: $color-white;
+  background-image: url("../../images/ArrowLeft.svg");
+  background-position: left;
+  background-repeat: no-repeat;
+  border: 0;
+  color: $color-secondary;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-primary;
+  }
+}

src/components/BackButton/BackButton.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+import './BackButton.scss';
+
+export const BackButton = () => {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      data-cy="backButton"
+      className="backButton"
+      type="button"
+      onClick={() => {
+        navigate(-1);
+      }}
+    >
+      <span className="backButton__icon">
+        back
+      </span>
+    </button>
+  );
+};

src/components/BannerSlider/BannerSlider.scss

@@ -0,0 +1,70 @@
+@import "../../main.scss";
+
+.banner {
+  &__container {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 8px;
+  }
+
+  &__images {
+    display: flex;
+    height: 400px;
+    order: 2;
+  }
+
+  &__image {
+    opacity: 0;
+    height: 0;
+    width: 0;
+    transition: opacity 0.3s;
+
+    &--active {
+      opacity: 1;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &__button {
+    flex: 0 0 32px;
+    border: 1px solid $color-icons;
+    background-color: $color-white;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border: 1px solid $color-primary;
+    }
+
+    &--prev {
+      order: 1;
+    }
+
+    &--next {
+      order: 3;
+    }
+  }
+
+  &__pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    height: 24px;
+    margin-bottom: 72px;
+  }
+
+  &__button-pg {
+    border: 1px solid transparent;
+    transition: all 0.3s;
+    background-color: $color-elements;
+
+    &:hover {
+      border: 1px solid $color-primary;
+    }
+
+    &--active {
+      background-color: $color-primary;
+    }
+  }
+}

src/components/BannerSlider/BannerSlider.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import './BannerSlider.scss';
+
+const BannerImages = [
+  'img/Banner1.jpg',
+  'img/Banner2.jpg',
+  'img/Banner3.jpg',
+];
+
+export const BannerSlider: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setCurrentIndex((prev) => prev + 1),
+      5000,
+    );
+
+    return () => clearInterval(interval);
+  }, [currentIndex]);
+
+  return (
+    <div className="banner">
+      <div className="banner__container">
+        <button
+          type="button"
+          onClick={() => setCurrentIndex((prev) => prev - 1)}
+          className="banner__button banner__button--prev"
+        >
+          <img src="./img/ArrowLeft.svg" alt="arrowLeft" />
+        </button>
+        <div className="banner__images">
+          {BannerImages.map((image, index) => {
+            if (currentIndex > BannerImages.length - 1) {
+              setCurrentIndex(0);
+            }
+
+            if (currentIndex < 0) {
+              setCurrentIndex(BannerImages.length - 1);
+            }
+
+            return (
+              <img
+                src={image}
+                alt={image}
+                key={image}
+                className={classNames('banner__image', {
+                  'banner__image--active': index === currentIndex,
+                })}
+              />
+            );
+          })}
+        </div>
+        <button
+          type="button"
+          onClick={() => setCurrentIndex((prev) => prev + 1)}
+          className="banner__button banner__button--next"
+        >
+          <img src="./img/ArrowRight.svg" alt="arrowRigth" />
+        </button>
+      </div>
+      <div className="banner__pagination-container">
+        {BannerImages.map((image, index) => (
+          <button
+            key={image}
+            aria-label="banner__pagination"
+            type="button"
+            className={classNames('banner__button-pg', {
+              'banner__button-pg--active': index === currentIndex,
+            })}
+            onClick={() => setCurrentIndex(index)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};