52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { Carousel } from "@/components/ui/Carousel";
|
||
import { Placeholder } from "@/components/ui/Placeholder";
|
||
import { ProductCard } from "@/components/ui/ProductCard";
|
||
import { SectionTitle } from "@/components/ui/SectionTitle";
|
||
import { specialSaleProducts } from "@/data/sample";
|
||
|
||
function SpecialSaleBanner() {
|
||
return (
|
||
<a
|
||
href="#"
|
||
className="relative w-[220px] shrink-0 self-stretch overflow-hidden rounded-xl border border-border md:w-[240px]"
|
||
>
|
||
<Placeholder
|
||
src="/images/sale-banner.svg"
|
||
alt="فروش ویژه"
|
||
width="100%"
|
||
label="240×380"
|
||
className="h-full min-h-[380px] w-full rounded-none border-0"
|
||
/>
|
||
</a>
|
||
);
|
||
}
|
||
|
||
export function SpecialSaleCarousel() {
|
||
return (
|
||
<section className="border-y border-red-light bg-red-light/30 py-10 md:py-14">
|
||
<div className="mx-auto max-w-7xl px-4">
|
||
<SectionTitle
|
||
title="فروش ویژه"
|
||
enTitle="Special Sale"
|
||
action="مشاهده همه"
|
||
/>
|
||
<Carousel ariaLabel="کاروسل فروش ویژه">
|
||
<SpecialSaleBanner />
|
||
{specialSaleProducts.map((product) => (
|
||
<ProductCard
|
||
key={product.id}
|
||
name={product.name}
|
||
brand={product.brand}
|
||
price={product.price}
|
||
oldPrice={product.oldPrice}
|
||
discount={product.discount}
|
||
image={product.image}
|
||
variant="sale"
|
||
/>
|
||
))}
|
||
</Carousel>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|