87 lines
3.4 KiB
React
87 lines
3.4 KiB
React
'use client';
|
|
|
|
// کاتالوگ محصولات جانبی (زعفران، تنقلات، نوشیدنی و ...) که مشتریان دستگاه با قیمت کمتر از بازار
|
|
// میتوانند سفارش دهند. دکمه «افزودن به سفارش» از همان سبد خرید Redux دستگاهها استفاده میکند.
|
|
|
|
import { Button, message } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { useDispatch } from 'react-redux';
|
|
import { addToCart } from '@/store/cartSlice';
|
|
import { useLanguage } from '@/app/context/LanguageContext';
|
|
|
|
function toLocaleNumber(n, locale) {
|
|
return n.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US');
|
|
}
|
|
|
|
export default function CatalogSection() {
|
|
const { t, locale } = useLanguage();
|
|
const dispatch = useDispatch();
|
|
const currencySuffix = locale === 'fa' ? ' ریال' : ' Rials';
|
|
|
|
const handleAdd = (item) => {
|
|
dispatch(
|
|
addToCart({
|
|
id: `catalog-${item.id}`,
|
|
name: item.name,
|
|
priceNumeric: item.priceNumeric,
|
|
priceLabel: `${toLocaleNumber(item.priceNumeric, locale)}${currencySuffix}`,
|
|
image: item.image,
|
|
})
|
|
);
|
|
|
|
message.success(t.catalog.addToast(item.name));
|
|
};
|
|
|
|
return (
|
|
<section id="catalog" className="relative px-6 md:px-16 py-20 md:py-28 bg-page border-t border-subtle">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-4">
|
|
<span className="text-brand-400 text-sm font-semibold tracking-wide">{t.catalog.eyebrow}</span>
|
|
<h2 className="text-2xl md:text-4xl font-extrabold brand-gradient-text mt-3">{t.catalog.title}</h2>
|
|
</div>
|
|
<p className="text-secondary text-sm md:text-base text-center max-w-2xl mx-auto mb-12">
|
|
{t.catalog.subtitle}
|
|
</p>
|
|
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{t.catalog.items.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="bg-surface border border-subtle rounded-2xl p-5 flex flex-col hover:border-brand-500/60 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<img src={item.image} alt={item.name} className="w-16 h-16 object-contain shrink-0" />
|
|
<div className="min-w-0">
|
|
<span className="text-[11px] text-brand-400 font-semibold">{item.category}</span>
|
|
<h3 className="text-primary font-bold text-sm leading-6">{item.name}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-auto flex items-end justify-between gap-2">
|
|
<div>
|
|
<p className="text-xs text-secondary line-through opacity-70">
|
|
{toLocaleNumber(item.originalPriceNumeric, locale)}
|
|
{currencySuffix}
|
|
</p>
|
|
<p className="text-base font-bold text-primary">
|
|
{toLocaleNumber(item.priceNumeric, locale)}
|
|
{currencySuffix}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
type="primary"
|
|
size="middle"
|
|
icon={<PlusOutlined />}
|
|
onClick={() => handleAdd(item)}
|
|
>
|
|
{t.catalog.addToOrder}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|