#128-development-created-CartPage

Studio-Yandex-Practicum · Dec 21, 2023 · 1384bd2 · 1384bd2
1 parent f320e89
commit 1384bd2
Show file tree

Hide file tree

Showing 24 changed files with 1,100 additions and 2 deletions.
diff --git a/src/assets/icons/IconLeftArrow.svg b/src/assets/icons/IconLeftArrow.svg
diff --git a/src/assets/icons/IconRightArrow.svg b/src/assets/icons/IconRightArrow.svg
diff --git a/src/assets/icons/dots.svg b/src/assets/icons/dots.svg
diff --git a/src/assets/styles/utils/_variables.scss b/src/assets/styles/utils/_variables.scss
@@ -20,4 +20,5 @@ $bg-gradient-green: linear-gradient(90deg, #02aab0 0%, #00cdac 100%);
 $theme-purple-500: #1306a1; // исправить цвет
 $theme-purple-400: #1306a1; // Исправить цвет
 $product-label-hit: #800080;
-$product-avaliability-status: #13d154;
+$product-avaliability-status: #13d154;
+$light-grey: #F1F1F5;
diff --git a/src/components/CardPreview/CardPreview.tsx b/src/components/CardPreview/CardPreview.tsx
@@ -1,11 +1,11 @@
 import { FC, useState } from 'react'
 import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
-import { Popup } from '@/ui/Popup/Popup'
 import QuickPurchaseForm from '@/features/QuickPurchase'
 import { CardPreviewFooter } from '../CardPreviewFooter/CardPreviewFooter'
 import { CardPreviewHeader } from '../CardPreviewHeader/CardPreviewHeader'
 import { ProductAvailability } from '../ProductAvailability/ProductAvailability'
 import styles from './CardPreview.module.scss'
+import Popup from '@/ui/Popup/Popup'
 
 /**
  * Компонент с контентом поп-апа товара.

diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss
@@ -0,0 +1,71 @@
+@use '../../../../assets/styles/utils/variables' as var;
+@use '../../../../assets/styles/utils/mixins' as media;
+
+
+
+.description {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: var.$white;
+    border-radius: 10px;
+    height: 110px;
+    width: 400px;
+
+    @include media.respond-to('large') {
+        width: 75%;
+    }
+}
+
+.frame {
+    width: 90px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    margin: 0 20px 0 0;
+    background: var.$white;
+    border-radius: 5px;
+
+    @include media.respond-to('large') {
+        border: 1px solid var.$light-grey;
+    }
+}
+
+.image {
+    display: flex;
+    max-height: 100%;
+    width: 70px;
+    height: 70px;
+    object-fit: cover;
+}
+
+.description_wrapper {
+    display: flex;
+    flex-direction: column;
+    max-height: 80px;
+}
+
+.number {
+    margin: 0 0 5px;
+    font-size: 14px;
+    line-height: 1;
+    font-weight: 400;
+    color: var.$subtitle-color;
+}
+
+.name {
+    display: flex;
+    font-size: 15px;
+    line-height: 1.35;
+    font-weight: 700;
+    color: var.$body-color;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 250px;
+
+    @include media.respond-to('large') {
+        width: 100%;
+    }
+}
diff --git a/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx b/src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx
@@ -0,0 +1,17 @@
+import { TProduct } from '@/mockData/productsData'
+import styles from './ProductEntity.module.scss'
+import { FC } from 'react'
+
+export const ProductEntity: FC<TProduct> = product => {
+  return (
+    <div className={`${styles.description}`}>
+      <div className={`${styles.frame}`}>
+        <img src={product.src} alt={'product'} className={styles.image} />
+      </div>
+      <div className={`${styles.description_wrapper}`}>
+        <span className={`${styles.number}`}>{product.article}</span>
+        <a className={`${styles.name}`}>{product.name}</a>
+      </div>
+    </div>
+  )
+}
diff --git a/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.module.scss
@@ -0,0 +1,93 @@
+@use '../../../../assets/styles/utils/variables' as var;
+@use '../../../../assets/styles/utils/mixins' as media;
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 30px 40px;
+    background-color: var.$white;
+    width: 460px;
+    border-radius: 5px;
+
+    @include media.respond-to('large') {
+        width: 100%
+    }
+}
+
+.wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.title {
+    font-size: 18px;
+    line-height: 1.2;
+    font-weight: 600;
+}
+
+.button_change {
+    background-color: inherit;
+    border: none;
+    font-size: 14px;
+    line-height: 1.2;
+    font-weight: 400;
+    color: var.$link-color;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
+.link {
+    text-decoration: none;
+}
+
+.form {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var.$light-grey;
+    border-radius: 5px;
+    padding: 3px 3px 3px 20px;
+
+    &:focus-within {
+        border: 1px solid var.$black;
+    }
+}
+
+.input {
+    width: 100%;
+    background: inherit;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 400;
+    color: var.$black;
+    appearance: none;
+    transition: 0.25s;
+
+    &::placeholder {
+        color: var.$body-color-light-grey;
+    }
+}
+
+.button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 108px;
+    height: 36px;
+    padding: 5px 20px;
+    background: var.$light-grey;
+    color: var.$black;
+    font-size: 14px;
+    border-radius: 5px;
+    font-weight: 700;
+
+    &:hover {
+        background-color: var.$theme-primary-color;
+        color: var.$white;
+    }
+}
diff --git a/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx b/src/features/CartCouponApply/ui/CartCouponApply/CartCouponApply.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import styles from './CartCouponApply.module.scss'
+
+const states = {
+  CERTIFICATE: 'CERTIFICATE',
+  COUPON: 'COUPON'
+}
+
+export const CartCouponApply: React.FC = () => {
+  const [value, setValue] = useState(states.CERTIFICATE)
+
+  function changeCouponToCertificate() {
+    if (value === states.CERTIFICATE) {
+      setValue(states.COUPON)
+    } else {
+      setValue(states.CERTIFICATE)
+    }
+  }
+
+  const title = value === states.CERTIFICATE ? 'Сертификат' : 'Купон'
+  const buttonText = value === states.CERTIFICATE ? 'Ввести купон' : 'Ввести сертификат'
+  const placeholder = value === states.CERTIFICATE ? 'Ввести код сертификата' : 'Ввести код купона'
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <h4 className={styles.title}>{title}</h4>
+        <button className={styles.button_change} onClick={changeCouponToCertificate}>
+          {buttonText}
+        </button>
+      </div>
+      <form className={styles.form}>
+        <input type="text" name="coupon" placeholder={placeholder} className={styles.input}></input>
+        <button className={styles.button}>Применить</button>
+      </form>
+    </div>
+  )
+}
diff --git a/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss b/src/features/CartEdit/ui/CartEdit/CartEdit.module.scss
@@ -0,0 +1,120 @@
+@use '../../../../assets/styles/utils/variables' as var;
+@use '../../../../assets/styles/utils/mixins' as media;
+
+.container {
+    display: flex;
+    align-items: center;
+    width: 938px;
+    height: 140px;
+    background-color: var.$white;
+    border-radius: 10px;
+    padding: 20px;
+    position: relative;
+
+    @include media.respond-to('large') {
+        width: 100%;
+        flex-direction: column;
+        height: 200px;
+        row-gap: 20px;
+        padding-right: 20px;
+    }
+}
+
+.product {
+    display: flex;
+    align-items: center;
+    width: 70%;
+
+    @include media.respond-to('large') {
+        width: 100%;
+    }
+}
+
+
+.input {
+    display: flex;
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: 500;
+    letter-spacing: 0.1px;
+    background: inherit;
+    height: 100%;
+    min-width: 20px;
+    max-width: 40px;
+    text-align: center;
+    appearance: none;
+    outline: none;
+    margin-left: 1px;
+    margin-right: 1px;
+}
+
+.counter {
+    border: 1px solid var.$light-grey;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: inherit;
+    padding: 4px;
+    height: 48px;
+
+    @include media.respond-to('large') {
+        width: 100%;
+    }
+}
+
+.button {
+    border: none;
+    background: none;
+    padding: 0;
+    font-family: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 100%;
+    transition: background 0.25s;
+}
+
+.button_decrease:hover {
+    background-color: var.$light-grey;
+    border-radius: 4px 0 0 4px;
+}
+
+.button_increase:hover {
+    background-color: var.$light-grey;
+    border-radius: 0 4px 4px 0;
+}
+
+.sum_wrapper {
+    display: flex;
+    flex-direction: column;
+    padding-left: 5%;
+    margin-right: 10%;
+
+    @include media.respond-to('large') {
+        width: 25%;
+    }
+}
+
+.sum {
+    font-size: 18px;
+    line-height: 1.2;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.price {
+    font-size: 13.5px;
+    color: var.$body-color-light-grey;
+    line-height: 1.2;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.button_dots {
+    position: absolute;
+    z-index: 90;
+    top: 0;
+    right: 0;
+}