mate-academy · syavaYki · Oct 24, 2024 · Nov 14, 2024 · Nov 14, 2024 · Nov 17, 2024
diff --git a/index.html b/index.html
@@ -1,12 +1,26 @@
 <!doctype html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Nice Gadgets store!</title>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="/public/img/icons/mobile-shop.png"
+    >
   </head>
-  <body>
+
+  <body class="theme">
     <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
+    <script
+      type="module"
+      src="/src/index.tsx"
+    ></script>
   </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -7,16 +7,18 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "bulma": "^1.0.1",
     "classnames": "^2.5.1",
+    "eslint-plugin-css": "^0.11.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
-    "react-transition-group": "^4.4.5"
+    "swiper": "^11.1.14",
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@linthtml/linthtml": "^0.10.1",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",

diff --git a/src/App.scss b/src/App.scss
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/components/BreadCrumbs/BreadCrumbs.module.scss b/src/components/BreadCrumbs/BreadCrumbs.module.scss
@@ -0,0 +1,59 @@
+@import '../../styles/main';
+
+.breadcrumbs_container {
+  display: flex;
+}
+
+.crumb {
+  @extend %small-text;
+
+  text-decoration: none;
+  font-weight: 600;
+  color: var(--c-primary);
+
+  &_last {
+    color: var(--c-secondary);
+    cursor: default !important;
+  }
+
+
+
+  &_container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-right: 8px;
+  }
+}
+
+.breadcrumbs_container .icon {
+  display: flex;
+  align-items: center;
+
+  &_container {
+    @extend %icon-container;
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: none;
+  }
+
+  &_right {
+    @include icon-bg(var(--fls-right-disabled));
+
+    width: 16px;
+    height: 16px;
+  }
+
+  &_home {
+    @include icon-bg(var(--fls-home));
+
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
diff --git a/src/components/BreadCrumbs/BreadCrumbs.tsx b/src/components/BreadCrumbs/BreadCrumbs.tsx
@@ -0,0 +1,71 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import style from './BreadCrumbs.module.scss';
+import classNames from 'classnames';
+import { sentenseFormating } from '../../utils/sentenseFormating';
+import { Product } from '../../types/Product';
+import { ProductItem } from '../../types/ProductItem';
+
+type Props = {
+  product?: Product | ProductItem;
+};
+export const BreadCrumbs: React.FC<Props> = ({ product }) => {
+  const location = useLocation();
+
+  return (
+    <div className={style.breadcrumbs_container}>
+      {location.pathname.split('/').map((crumb, index, arr) => {
+        const icon = (
+          <div className={classNames(style.icon_container)}>
+            <div className={classNames(style.icon, style.icon_right)} />
+          </div>
+        );
+
+        if (index !== arr.length - 1) {
+          if (index === 0) {
+            return (
+              <div
+                key={index}
+                className={classNames(style.crumb_container)}
+              >
+                <NavLink
+                  to={'/home'}
+                  className={classNames(style.crumb, style.crumb_home)}
+                >
+                  <div className={classNames(style.icon_container)}>
+                    <div className={classNames(style.icon, style.icon_home)} />
+                  </div>
+                </NavLink>
+                {icon}
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={index}
+              className={classNames(style.crumb_container)}
+            >
+              <NavLink
+                to={`/${crumb}`}
+                className={classNames(style.crumb)}
+              >
+                {sentenseFormating(crumb)}
+              </NavLink>
+              {icon}
+            </div>
+          );
+        }
+
+        return (
+          <NavLink
+            key={index}
+            to={''}
+            className={classNames(style.crumb, style.crumb_last)}
+          >
+            {product ? product.name : sentenseFormating(crumb)}
+          </NavLink>
+        );
+      })}
+    </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/ButtonsAddCardFav/ButtonsAddCardFav.module.scss b/src/components/ButtonsAddCardFav/ButtonsAddCardFav.module.scss
@@ -0,0 +1,19 @@
+@import '../../styles/main';
+
+.container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+
+  &_addToCart {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  &_favorite {
+    box-sizing: border-box;
+    aspect-ratio: 1/1;
+  }
+}
diff --git a/src/components/ButtonsAddCardFav/ButtonsAddCardFav.tsx b/src/components/ButtonsAddCardFav/ButtonsAddCardFav.tsx
@@ -0,0 +1,43 @@
+import style from './ButtonsAddCardFav.module.scss';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { DispatchContext, StateContext } from '../GlobalProvider';
+import { FavoriteIcon } from './FavoriteIcon';
+import { Product } from '../../types/Product';
+
+type Props = {
+  productId: string;
+};
+
+export const ButtonsAddCardFav: React.FC<Props> = ({ productId }) => {
+  const { inCart } = useContext(StateContext);
+  const dispatch = useContext(DispatchContext);
+  const prodInCart = inCart
+    ? !!inCart.find((prod: Product) => prod.itemId === productId)
+    : false;
+
+  return (
+    <div className={classNames(style.container)}>
+      <div
+        className={classNames(style.container_addToCart, 'buttons_container', {
+          buttons_container_selected: prodInCart,
+        })}
+        onClick={() => {
+          dispatch({ type: 'toggleInCart', payload: productId });
+        }}
+      >
+        <div
+          className={classNames('buttons_text', {
+            buttons_text_selected: prodInCart,
+          })}
+        >
+          {!prodInCart ? 'Add to cart' : 'Added to cart'}
+        </div>
+      </div>
+
+      <div className={classNames(style.container_favorite)}>
+        <FavoriteIcon curProductId={productId} />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ButtonsAddCardFav/FavoriteIcon/FavoriteIcon.module.scss b/src/components/ButtonsAddCardFav/FavoriteIcon/FavoriteIcon.module.scss
@@ -0,0 +1,18 @@
+@import '../../../styles/main';
+
+.icon {
+  &_container {
+    @extend %icon-container;
+
+    height: 100%;
+    width: 100%;
+  }
+
+  &_favorite {
+    @include icon-bg(var(--fls-favorite));
+  }
+}
+
+.selected {
+  @include icon-bg(var(--fls-favorite-selected));
+}
diff --git a/src/components/ButtonsAddCardFav/FavoriteIcon/FavoriteIcon.tsx b/src/components/ButtonsAddCardFav/FavoriteIcon/FavoriteIcon.tsx
@@ -0,0 +1,32 @@
+import style from './FavoriteIcon.module.scss';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { DispatchContext, StateContext } from '../../GlobalProvider';
+import { Product } from '../../../types/Product';
+
+type Props = {
+  curProductId: string;
+};
+export const FavoriteIcon: React.FC<Props> = ({ curProductId }) => {
+  const { inFavorites } = useContext(StateContext);
+  const dispatch = useContext(DispatchContext);
+
+  const prodInFavorite = inFavorites
+    ? !!inFavorites.find((prod: Product) => prod.itemId === curProductId)
+    : false;
+
+  return (
+    <div
+      className={classNames(style.icon_container)}
+      onClick={() =>
+        dispatch({ type: 'toggleInFavorites', payload: curProductId })
+      }
+    >
+      <div
+        className={classNames(style.icon, style.icon_favorite, {
+          [style.selected]: prodInFavorite,
+        })}
+      />
+    </div>
+  );
+};
diff --git a/src/components/ButtonsAddCardFav/FavoriteIcon/index.ts b/src/components/ButtonsAddCardFav/FavoriteIcon/index.ts
@@ -0,0 +1 @@
+export * from './FavoriteIcon';
diff --git a/src/components/ButtonsAddCardFav/index.ts b/src/components/ButtonsAddCardFav/index.ts
@@ -0,0 +1 @@
+export * from './ButtonsAddCardFav';
diff --git a/src/components/CapacitySelector/CapacitySelector.module.scss b/src/components/CapacitySelector/CapacitySelector.module.scss
@@ -0,0 +1,7 @@
+@import '../../styles/main';
+
+.capacity_selector_container {
+  display: flex;
+  gap: 8px;
+  height: 32px;
+}
diff --git a/src/components/CapacitySelector/CapacitySelector.tsx b/src/components/CapacitySelector/CapacitySelector.tsx
@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import style from './CapacitySelector.module.scss';
+
+type Props = {
+  capacities: string[];
+  selectedCapacity: string;
+  onClick: (capacity: string) => void;
+};
+export const CapacitySelector: React.FC<Props> = ({
+  capacities,
+  selectedCapacity,
+  onClick,
+}) => {
+  return (
+    <div className={style.capacity_selector_container}>
+      {capacities.map(capacity => {
+        return (
+          <div
+            key={capacity}
+            className={classNames('buttons_container', {
+              buttons_container_selected: selectedCapacity !== capacity,
+            })}
+            onClick={() => {
+              onClick(capacity);
+            }}
+          >
+            <div
+              className={classNames('buttons_text', {
+                buttons_text_selected: selectedCapacity !== capacity,
+              })}
+            >
+              {capacity}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/CapacitySelector/index.ts b/src/components/CapacitySelector/index.ts
@@ -0,0 +1 @@
+export * from './CapacitySelector';