52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import React from "react";
|
||
import { useCart } from "@/contexts/CartContext";
|
||
|
||
const CartInfo: React.FC = () => {
|
||
const { state } = useCart();
|
||
const { summary } = state;
|
||
|
||
// Функция для форматирования цены
|
||
const formatPrice = (price: number) => {
|
||
return `${price.toLocaleString('ru-RU')} ₽`;
|
||
};
|
||
|
||
return (
|
||
<section className="section-info">
|
||
<div className="w-layout-blockcontainer container info w-container">
|
||
<div className="w-layout-vflex flex-block-9">
|
||
<div className="w-layout-hflex flex-block-7">
|
||
<a href="/" className="link-block w-inline-block">
|
||
<div>Главная</div>
|
||
</a>
|
||
<div className="text-block-3">→</div>
|
||
<a href="/catalog" className="link-block w-inline-block">
|
||
<div>Каталог</div>
|
||
</a>
|
||
<div className="text-block-3">→</div>
|
||
<a href="/cart" className="link-block-2 w-inline-block">
|
||
<div>Корзина</div>
|
||
</a>
|
||
</div>
|
||
<div className="w-layout-hflex flex-block-8">
|
||
<div className="w-layout-hflex flex-block-10">
|
||
<h1 className="heading">Корзина</h1>
|
||
<div className="text-block-4">
|
||
{summary.totalItems > 0 ? (
|
||
<>В вашей корзине {summary.totalItems} товара на <strong>{formatPrice(summary.totalPrice - summary.totalDiscount)}</strong></>
|
||
) : (
|
||
'Ваша корзина пуста'
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="w-layout-hflex flex-block-11">
|
||
<img src="/images/qwestions.svg" loading="lazy" alt="" className="image-4" />
|
||
<div className="text-block-5">Как оформить заказ?</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CartInfo;
|