latosa-escrima/frontend/components/gallery.tsx

"use client";

import { ArrowLeft, ArrowRight } from "lucide-react";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import {
	Carousel,
	CarouselApi,
	CarouselContent,
	CarouselItem,
} from "@/components/ui/carousel";

const data = [
	{
		id: "item-1",
		title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
		summary:
			"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
		href: "#",
		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
	},
	{
		id: "item-2",
		title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
		summary:
			"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
		href: "#",
		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
	},
	{
		id: "item-3",
		title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
		summary:
			"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
		href: "#",
		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
	},
	{
		id: "item-4",
		title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
		summary:
			"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
		href: "#",
		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
	},
	{
		id: "item-5",
		title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
		summary:
			"Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
		href: "#",
		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
	},
];

const Gallery = () => {
	const [carouselApi, setCarouselApi] = useState<CarouselApi>();
	const [canScrollPrev, setCanScrollPrev] = useState(false);
	const [canScrollNext, setCanScrollNext] = useState(false);
	useEffect(() => {
		if (!carouselApi) {
			return;
		}
		const updateSelection = () => {
			setCanScrollPrev(carouselApi.canScrollPrev());
			setCanScrollNext(carouselApi.canScrollNext());
		};
		updateSelection();
		carouselApi.on("select", updateSelection);
		return () => {
			carouselApi.off("select", updateSelection);
		};
	}, [carouselApi]);
	return (
		<section className="lg:md:py-24 sm:py-12 flex flex-col items-center overflow-visible">
			<div className="container">
				<div className="mb-8 flex flex-col justify-between md:mb-14 md:flex-row md:items-end lg:mb-16">
					<div>
						<p className="mb-6 text-xs font-medium uppercase tracking-wider">
							Tag Line
						</p>
						<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
							Gallery
						</h2>
						<a
							href="#"
							className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
						>
							Book a demo{" "}
							<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
						</a>
					</div>
					<div className="mt-8 flex shrink-0 items-center justify-center gap-2">
						<Button
							size="icon"
							variant="outline"
							onClick={() => {
								carouselApi?.scrollPrev();
							}}
							disabled={!canScrollPrev}
							className="disabled:pointer-events-auto"
						>
							<ArrowLeft className="size-5" />
						</Button>
						<Button
							size="icon"
							variant="outline"
							onClick={() => {
								carouselApi?.scrollNext();
							}}
							disabled={!canScrollNext}
							className="disabled:pointer-events-auto"
						>
							<ArrowRight className="size-5" />
						</Button>
					</div>
				</div>
			</div>
			<div className="container w-full overflow-y-auto">
				<Carousel
					setApi={setCarouselApi}
					opts={{
						breakpoints: {
							"(max-width: 768px)": {
								dragFree: true,
							},
						},
					}}
				>
					<CarouselContent className="">
						{data.map((item) => (
							<CarouselItem
								key={item.id}
								className="pl-[20px] md:max-w-[452px]"
							>
								<a
									href={item.href}
									className="group flex flex-col justify-between"
								>
									<div>
										<div className="flex aspect-[3/2] overflow-clip rounded-xl">
											<div className="flex-1">
												<div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
													<img
														src={item.image}
														alt={item.title}
														className="h-full w-full object-cover object-center"
													/>
												</div>
											</div>
										</div>
									</div>
									<div className="mb-2 line-clamp-3 break-words pt-4 text-lg font-medium md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl">
										{item.title}
									</div>
									<div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
										{item.summary}
									</div>
									<div className="flex items-center text-sm">
										Read more{" "}
										<ArrowRight className="ml-2 size-5 transition-transform group-hover:translate-x-1" />
									</div>
								</a>
							</CarouselItem>
						))}
					</CarouselContent>
				</Carousel>
			</div>
		</section>
	);
};

export default Gallery;