feat(shopping-cart page): created shopping-cart page, prepsared style…

…s for future functionality

created shopping-list and shopping-item components for dividing logic from shopping-cart page, made
shopping-cart page

src/App.tsx

@@ -13,6 +13,8 @@ import ProfileUser from '@pages/profile/profile-user/index.tsx';
 import PopupCheckEmail from '@components/popups/popup-check-email/index.tsx';
 import ProfileAddresses from '@pages/profile/profile-addresses/index.tsx';
 import Category from '@pages/category';
+// import Checkout from '@pages/checkout/index.tsx';
+import ShoppingCart from '@pages/shopping-cart/index.tsx';
 
 // импорт временных массивов для отображения каталогов и продуктов
 // временное решение для верстки, потом удалить
@@ -34,6 +36,7 @@ function App() {
 					<Route path={URLS.CATALOG} element={<Catalog />} />
 					<Route path="/catalog/:category" element={<Category />} />
 					<Route path="/catalog/:category/:id" element={<Product />} />
+					<Route path="/cart" element={<ShoppingCart />} />
 					<Route
 						path={URLS.PROFILE}
 						element={<ProtectedRoute element={Profile} loggedIn={true} />}

src/components/shopping-item/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './shopping-item.module.scss';
+import { productApiDataExample } from '@data/dataExamples';
+
+const ShoppingItem: React.FC = () => {
+	const data = productApiDataExample;
+	return (
+		<div className={styles.item}>
+			<img className={styles.item__image} src={data.photo} alt={data.name} />
+			<p className={`text_type_u ${styles.item__title}`}>{data.name}</p>
+			<div className={styles.item__weight}>
+				<button className={`${styles.item_btn} ${styles.item__decrease_btn}`}></button>
+				<p className={`text_type_u ${styles.item__measure}`}>300 гр</p>
+				<button className={`${styles.item_btn} ${styles.item__increase_btn}`}></button>
+			</div>
+			<p className={`text_type_u ${styles.item__price}`}>{data.price} руб.</p>
+			<button className={`${styles.item_btn} ${styles.item__delete_btn}`}></button>
+		</div>
+	);
+};
+
+export default ShoppingItem;

src/components/shopping-item/shopping-item.module.scss

@@ -0,0 +1,59 @@
+.item {
+	width: 676px;
+	max-width: 676px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.item__image {
+	border-radius: 16px;
+	object-fit: contain;
+	width: 74px;
+	height: 74px;
+}
+
+.item__title {
+	max-width: 153px;
+}
+
+.item__weight {
+	max-width: 161px;
+	width: 100%;
+	border: 1px solid #cfcfcf;
+	border-radius: 8px;
+	display: flex;
+	flex-wrap: nowrap;
+	justify-content: space-evenly;
+	align-items: center;
+	padding: 14px 0;
+}
+
+.item_btn {
+	all: unset;
+	content: '';
+	cursor: pointer;
+	background-size: 24px 24px;
+	width: 24px;
+	height: 24px;
+	background-position: center;
+	background-repeat: no-repeat;
+
+	:hover {
+		opacity: 0.5;
+		transition: opacity 0.5s ease-in-out;
+	}
+}
+
+.item__delete_btn {
+	background: url('../../assets/images/delete_button.svg');
+}
+
+.item__decrease_btn {
+	background: url('../../assets/images/minus_button.svg');
+}
+
+.item__increase_btn {
+	background: url('../../assets/images/plus_button.svg');
+}

src/components/shopping-list/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './shopping-list.module.scss';
+import ShoppingItem from '@components/shopping-item';
+
+const ShoppingList: React.FC = () => {
+	return (
+		<div className={styles.products}>
+			<ShoppingItem />
+			<ShoppingItem />
+			<ShoppingItem />
+			<ShoppingItem />
+		</div>
+	);
+};
+
+export default ShoppingList;

src/components/shopping-list/shopping-list.module.scss

@@ -0,0 +1,8 @@
+.products {
+	max-width: 676px;
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+	justify-content: center;
+	align-items: center;
+}

src/pages/shopping-cart/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import styles from './shopping-cart.module.scss';
+import ProductCard from '@components/product-card';
+import { products } from '@data/dataExamples.ts';
+import Button from '@components/Button';
+import ShoppingList from '@components/shopping-list';
+
+type Product = {
+	cardName: string;
+	price: string;
+	weight: string;
+	buttonText: string;
+};
+
+const ShoppingCart: React.FC = () => {
+	return (
+		<section className={styles.cart}>
+			<div className={styles.details}>
+				<div className={styles.products}>
+					<div className={styles.products__title}>
+						<h3>5 товаров</h3>
+						<button className={`${styles.products__btn} text_type_u `}>
+							Очистить корзину
+						</button>
+					</div>
+					<ShoppingList />
+				</div>
+				<div className={styles.details__form}>
+					<div className={styles.details__sum}>
+						<p className={`text-m`}>Итого</p>
+						<p className={`text-m`}>670 руб.</p>
+					</div>
+					<div className={styles.delivery}>
+						<div className={`${styles.delivery__btn} ${styles.delivery__btn_byCar}`}>
+							<div
+								className={`${styles.delivery__icon} ${styles.delivery__icon_truck}`}
+							></div>
+							<p className={`text_type_u ${styles.delivery__title}`}>Доставка</p>
+						</div>
+						<div
+							className={`${styles.delivery__btn} ${styles.delivery__btn_unactive} ${styles.delivery__btn_byThemselves}`}
+						>
+							<div
+								className={`${styles.delivery__icon} ${styles.delivery__icon_flag_unactive}`}
+							></div>
+							<p
+								className={`text_type_u ${styles.delivery__title} ${styles.delivery__title_unactive}`}
+							>
+								Самовывоз
+							</p>
+						</div>
+					</div>
+					<div className={styles.details__order}>
+						<Button buttonText="Оформить заказ" buttonStyle="green-button" />
+						<p className={`${styles.details__title}`}>
+							Нажимая на&nbsp;кнопку &laquo;Оформить заказ&raquo;, вы&nbsp;соглашаетесь
+							с&nbsp;условиями обработки персональных данных, а&nbsp;также
+							с&nbsp;условиями продажи.
+						</p>
+					</div>
+				</div>
+			</div>
+			<div className={styles.cart__recomendation}>
+				<h2>Вас также может заинтересовать</h2>
+				<div className={styles.cart__advertisement}>
+					{products.map((product: Product, index: number) => (
+						<ProductCard
+							key={index}
+							cardName={product.cardName}
+							price={product.price}
+							weight={product.weight}
+							buttonText={product.buttonText}
+						/>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default ShoppingCart;