mate-academy · Q1W2E3R4T5Y6U7I8a · Dec 22, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 27, 2024
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/img/icons/arrow-down.svg b/public/img/icons/arrow-down.svg
diff --git a/public/img/icons/arrow-left-white.svg b/public/img/icons/arrow-left-white.svg
diff --git a/public/img/icons/arrow-left.svg b/public/img/icons/arrow-left.svg
diff --git a/public/img/icons/arrow-right-white.svg b/public/img/icons/arrow-right-white.svg
diff --git a/public/img/icons/arrow-right.svg b/public/img/icons/arrow-right.svg
diff --git a/public/img/icons/arrow-top.svg b/public/img/icons/arrow-top.svg
diff --git a/public/img/icons/burger.svg b/public/img/icons/burger.svg
diff --git a/public/img/icons/cart.svg b/public/img/icons/cart.svg
diff --git a/public/img/icons/cross-x.svg b/public/img/icons/cross-x.svg
diff --git a/public/img/icons/favourites-heart.svg b/public/img/icons/favourites-heart.svg
diff --git a/public/img/icons/footer-logo.svg b/public/img/icons/footer-logo.svg
diff --git a/public/img/icons/heart-filled.svg b/public/img/icons/heart-filled.svg
diff --git a/public/img/icons/home.svg b/public/img/icons/home.svg
diff --git a/public/img/icons/logo.svg b/public/img/icons/logo.svg
diff --git a/public/img/icons/minus.svg b/public/img/icons/minus.svg
diff --git a/public/img/icons/plus.svg b/public/img/icons/plus.svg
diff --git a/public/img/main-slider/smart-watches.jpeg b/public/img/main-slider/smart-watches.jpeg
diff --git a/public/img/main-slider/smartphones.jpeg b/public/img/main-slider/smartphones.jpeg
diff --git a/public/img/main-slider/tablets.jpeg b/public/img/main-slider/tablets.jpeg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Phone catalog</title>
+    <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.scss b/src/App.scss
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/api/products.ts b/src/api/products.ts
@@ -0,0 +1,17 @@
+import { client } from '../utils/fetchClient';
+
+export const getAllProducts = () => {
+  return client.get('api/products.json');
+};
+
+export const getPhones = () => {
+  return client.get('api/phones.json');
+};
+
+export const getTablets = () => {
+  return client.get('api/tablets.json');
+};
+
+export const getAccessories = () => {
+  return client.get('api/accessories.json');
+};
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
diff --git a/src/app/store.ts b/src/app/store.ts
@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import { productsSlice } from '../features/products';
+import { cartSlice } from '../features/cart';
+import { favouriteSlice } from '../features/favourite';
+
+const rootReducer = combineSlices(productsSlice, cartSlice, favouriteSlice);
+
+export const store = configureStore({
+  reducer: rootReducer,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/src/components/BackButton/BackButton.module.scss b/src/components/BackButton/BackButton.module.scss
@@ -0,0 +1,35 @@
+.back {
+  border: none;
+  background: transparent;
+  margin-top: 24px;
+  height: 16px;
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+  transition: color $hover-transition ease;
+  color: $white;
+  font-family: inherit;
+
+  &__text {
+    color: inherit;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__arrow {
+    height: 16px;
+    width: 16px;
+  }
+
+  &:hover {
+    color: $accent;
+  }
+
+  @media (min-width: $tablet) {
+    margin-top: 40px;
+  }
+}
diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx
@@ -0,0 +1,14 @@
+import { useNavigate } from 'react-router-dom';
+
+export const BackButton = () => {
+  const navigate = useNavigate();
+
+  return (
+    <button className="back" onClick={() => navigate(-1)}>
+      <div className="back__arrow">
+        <img src="./img/icons/arrow-left-white.svg" alt="Arrow left" />
+      </div>
+      <span className="back__text">Back</span>
+    </button>
+  );
+};
diff --git a/src/components/BackButton/index.ts b/src/components/BackButton/index.ts
@@ -0,0 +1 @@
+export * from './BackButton';
diff --git a/src/components/Breadcrumbs/Breadcrumbs.module.scss b/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,47 @@
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 24px 0;
+  height: 16px;
+
+  @media (min-width: $tablet) {
+    margin: 24px 0 40px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 100%;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 15px;
+    color: $gray;
+    transition: color $hover-transition ease;
+
+    &__image {
+      transition: transform $hover-transition ease;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &--link {
+      color: $white;
+      text-decoration: none;
+
+      &:hover {
+        color: $accent;
+      }
+    }
+
+    &--last {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+    }
+  }
+}
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,49 @@
+import { Link, useLocation } from 'react-router-dom';
+import { useAppSelector } from '../../app/hooks';
+import { Product } from '../../types/Product';
+import React from 'react';
+
+export const Breadcrumbs = () => {
+  const location = useLocation();
+  const breadcrumbs = location.pathname.split('/').filter(path => path);
+  const products = useAppSelector(state => state.products);
+  const currentProduct = products.find(
+    (product: Product) =>
+      product.itemId === breadcrumbs[breadcrumbs.length - 1],
+  ) || { name: breadcrumbs[breadcrumbs.length - 1] };
+
+  breadcrumbs.pop();
+  breadcrumbs.push(currentProduct.name);
+
+  return (
+    <div className="breadcrumbs">
+      <Link to="/" className="breadcrumbs__item breadcrumbs__item--link">
+        <img
+          src="./img/icons/home.svg"
+          alt="Home"
+          className="breadcrumbs__item__image"
+        />
+      </Link>
+      {breadcrumbs.map((crumb, index) => {
+        const routeTo = `/${breadcrumbs.slice(0, index + 1).join('/')}`;
+        const isLast = index === breadcrumbs.length - 1;
+        const crumbName = crumb.charAt(0).toUpperCase() + crumb.slice(1);
+
+        return (
+          <div key={index} className="breadcrumbs__item">
+            <img src="./img/icons/arrow-right.svg" alt="Arrow right" />
+            {!isLast ? (
+              <Link to={routeTo} className="breadcrumbs__item--link">
+                {crumbName}
+              </Link>
+            ) : (
+              <span className="breadcrumbs__item breadcrumbs__item--last">
+                {crumbName}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/Breadcrumbs/index.ts b/src/components/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './Breadcrumbs';
diff --git a/src/components/Categories/Categories.module.scss b/src/components/Categories/Categories.module.scss
@@ -0,0 +1,75 @@
+.categories {
+  margin-bottom: 56px;
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+
+    @media (min-width: $tablet) {
+      flex-direction: row;
+      gap: 16px;
+    }
+  }
+
+  &__background {
+    overflow: hidden;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    position: relative;
+    transition: transform $hover-transition ease;
+    z-index: 1;
+
+    &:hover {
+      transform: scale(1.05);
+      z-index: 2;
+    }
+  }
+
+  &__item {
+    width: 100%;
+
+    @media (min-width: $tablet) {
+      width: calc((100% - 32px) / 3);
+    }
+
+    .categories__image {
+      height: 100%;
+      transform: translate(30%, 30%) scale(1.5);
+    }
+
+    &:nth-child(1) {
+      .categories__background {
+        background: #6D6474;
+      }
+    }
+
+    &:nth-child(2) {
+      .categories__background {
+        background: #8D8D92;
+      }
+    }
+
+    &:nth-child(3) {
+      .categories__background {
+        background: #D53C51;
+      }
+
+      .categories__image {
+        transform: translate(5%, 10%);
+      }
+    }
+  }
+
+  &__description {
+    color: $white;
+    margin-top: 20px;
+  }
+
+  &__count {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 21px;
+    color: $gray;
+  }
+}