103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type ProductImages = {
|
|
srcset: string;
|
|
src: string;
|
|
alt: string;
|
|
width: number;
|
|
height: number;
|
|
sizes: string;
|
|
}[];
|
|
|
|
const PRODUCT_IMAGES: ProductImages = [
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png 904w, /block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-1.png 482w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Man-in-Hoodie-&-Jacket-2.png",
|
|
alt: "",
|
|
width: 904,
|
|
height: 1200,
|
|
sizes: "(min-width: 904px) 904px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png 675w, /block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-1.png 360w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Young-Man-in-Casual-Outfit-2.png",
|
|
alt: "",
|
|
width: 675,
|
|
height: 1200,
|
|
sizes: "(min-width: 675px) 675px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png 900w, /block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-m-2.png 900w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Modern-Casual-Style-2.png",
|
|
alt: "",
|
|
width: 900,
|
|
height: 1200,
|
|
sizes: "(min-width: 900px) 900px, 100vw",
|
|
},
|
|
{
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png 1050w",
|
|
src: "/block-media/shadcnblocks/block/ecommerce/clothes/Tattooed-Streetwear-Look-2.png",
|
|
alt: "",
|
|
width: 1050,
|
|
height: 1498,
|
|
sizes: "(min-width: 1050px) 1050px, 100vw",
|
|
},
|
|
];
|
|
interface ProductGallery1Props {
|
|
className?: string;
|
|
}
|
|
|
|
const ProductGallery1 = ({ className }: ProductGallery1Props) => {
|
|
return (
|
|
<section className={cn("mx-auto w-full max-w-160", className)}>
|
|
<Carousel
|
|
opts={{
|
|
breakpoints: {
|
|
"(min-width: 768px)": {
|
|
active: false,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<CarouselContent className="gap-4 md:m-0 md:grid md:grid-cols-3 xl:gap-5">
|
|
{PRODUCT_IMAGES.map((img, index) => (
|
|
<CarouselItem
|
|
className="first:col-span-3 md:p-0"
|
|
key={`product-gallery-1-image-${index}`}
|
|
>
|
|
<AspectRatio ratio={1} className="overflow-hidden rounded-lg">
|
|
<img
|
|
srcSet={img.srcset}
|
|
alt={img.alt}
|
|
width={img.width}
|
|
height={img.height}
|
|
sizes={img.sizes}
|
|
className="block size-full object-cover object-center"
|
|
/>
|
|
</AspectRatio>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<div className="md:hidden">
|
|
<CarouselPrevious className="left-4" />
|
|
<CarouselNext className="right-4" />
|
|
</div>
|
|
</Carousel>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { ProductGallery1 };
|