hamid zarghami
71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { cn } from "@/app/lib/cn";
|
||
import bannersImage from "@/assets/images/best-sellers/banners.jpg";
|
||
import boxesImage from "@/assets/images/best-sellers/boxes.jpg";
|
||
import businessCardsImage from "@/assets/images/best-sellers/business-cards.jpg";
|
||
import calendarsImage from "@/assets/images/best-sellers/calendars.jpg";
|
||
import catalogsImage from "@/assets/images/best-sellers/catalogs.png";
|
||
import { ArrowLeft } from "iconsax-reactjs";
|
||
import Image, { type StaticImageData } from "next/image";
|
||
import { type FC } from "react";
|
||
|
||
type CategoryItem = {
|
||
title: string;
|
||
image: StaticImageData;
|
||
featured?: boolean;
|
||
};
|
||
|
||
const categories: CategoryItem[] = [
|
||
{ title: "جعبه ها", image: boxesImage, featured: true },
|
||
{ title: "کاتالوگ ها", image: catalogsImage },
|
||
{ title: "کارت ویزیت", image: businessCardsImage },
|
||
{ title: "تقویم ها", image: calendarsImage },
|
||
{ title: "بنرها", image: bannersImage },
|
||
];
|
||
|
||
type CategoryTileProps = {
|
||
title: string;
|
||
image: StaticImageData;
|
||
featured?: boolean;
|
||
};
|
||
|
||
const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"relative overflow-hidden rounded-[40px]",
|
||
featured ? "col-span-2 row-span-2" : "aspect-square",
|
||
)}
|
||
>
|
||
<Image src={image} alt={title} fill className="object-cover" sizes={featured ? "50vw" : "25vw"} />
|
||
<div
|
||
className={cn(
|
||
"absolute inset-x-4 bottom-4 flex items-center justify-between rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
|
||
featured ? "px-6 py-3.5" : "px-5 py-3",
|
||
)}
|
||
>
|
||
<div className={cn("text-white font-bold", featured ? "text-lg" : "text-base")}>{title}</div>
|
||
<div className="flex items-center gap-1.5 text-white">
|
||
<span className={cn("font-bold", featured ? "text-sm" : "text-xs")}>مشاهده</span>
|
||
<ArrowLeft size={featured ? 20 : 18} color="currentColor" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const BestSellerCategories: FC = () => {
|
||
return (
|
||
<div className="mt-[120px] px-[120px]">
|
||
<div className="font-bold text-2xl">دسته بندی های پرفروش</div>
|
||
|
||
<div className="mt-12 grid grid-cols-4 gap-10">
|
||
{categories.map((category) => (
|
||
<CategoryTile key={category.title} title={category.title} image={category.image} featured={category.featured} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BestSellerCategories;
|