98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { DirectionAwareHover } from "@/components/aceternity/direction-aware-hover";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FeatureData {
|
|
id: string;
|
|
imgClass: string;
|
|
imgsrc: string;
|
|
ptitle: string;
|
|
price: number;
|
|
}
|
|
|
|
interface Gallery31Props {
|
|
featureData?: FeatureData[];
|
|
className?: string;
|
|
}
|
|
|
|
const formatPrice = (value: number) =>
|
|
new Intl.NumberFormat("fa-IR", {
|
|
style: "currency",
|
|
currency: "IRR",
|
|
maximumFractionDigits: 0,
|
|
}).format(value);
|
|
|
|
const defaultFeatureData: FeatureData[] = [
|
|
{
|
|
id: "product-1",
|
|
imgClass: "md:h-70 w-full rounded-3xl md:w-full",
|
|
imgsrc: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
|
|
ptitle: "دسته بازی",
|
|
price: 199,
|
|
},
|
|
{
|
|
id: "product-2",
|
|
imgClass: "md:h-70 w-full rounded-3xl md:w-full lg:col-span-2",
|
|
imgsrc: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
|
|
ptitle: "هدفون بیسیم",
|
|
price: 189,
|
|
},
|
|
{
|
|
id: "product-3",
|
|
imgClass:
|
|
"md:h-70 col-span-1 h-full w-full rounded-3xl md:w-full lg:row-span-2 lg:h-full",
|
|
imgsrc: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
|
|
ptitle: "ساعت هوشمند",
|
|
price: 249,
|
|
},
|
|
{
|
|
id: "product-4",
|
|
imgClass: "md:h-70 w-full rounded-3xl md:w-full lg:col-span-2",
|
|
imgsrc: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
|
|
ptitle: "اسپیکر بلوتوث",
|
|
price: 179,
|
|
},
|
|
{
|
|
id: "product-5",
|
|
imgClass: "md:h-70 w-full rounded-3xl md:w-full",
|
|
imgsrc: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
|
|
ptitle: "کیبورد مکانیکی",
|
|
price: 219,
|
|
},
|
|
];
|
|
|
|
const Gallery31 = ({
|
|
featureData = defaultFeatureData,
|
|
className,
|
|
}: Gallery31Props) => {
|
|
return (
|
|
<section lang="fa" className={cn("relative h-full overflow-hidden py-32", className)}>
|
|
<div className="relative container flex h-full w-full flex-col items-center justify-center">
|
|
<div className="relative z-10 flex flex-col items-center justify-center gap-5">
|
|
<p className="rounded-full bg-muted px-2 py-1 text-xs">کاتالوگ</p>
|
|
<h2 className="font-calSans text-center text-2xll font-medium md:text-2xll">
|
|
بلاکهای اختصاصی ری یو آی
|
|
</h2>
|
|
<p className="text-center text-muted-foreground">
|
|
مجموعهای منتخب از محصولات با طراحی مدرن و کیفیت ساخت بالا.
|
|
</p>
|
|
</div>
|
|
<div className="relative mt-[34px] grid w-full grid-cols-1 justify-center gap-[10px] md:grid-cols-2 lg:grid-cols-4">
|
|
{featureData.map((item) => (
|
|
<DirectionAwareHover
|
|
key={item.id}
|
|
className={item.imgClass}
|
|
imageUrl={item.imgsrc}
|
|
childrenClassName="text-end"
|
|
>
|
|
<p className="text-xl font-bold">{item.ptitle}</p>
|
|
<p className="text-sm font-normal">{formatPrice(item.price)}</p>
|
|
</DirectionAwareHover>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Gallery31 };
|