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: React.FC<
	React.PropsWithChildren<{
		tagLine: string;
		title: string;
		cta: string;
		ctaHref: string;
	}>
> = ({ children, tagLine, title, cta, ctaHref }) => {
	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="flex flex-col items-center overflow-visible sm:py-12 lg:md:py-24">
			<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">
							{tagLine}
						</p>
						<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
							{title}
						</h2>
						<a
							href={ctaHref}
							className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
						>
							{cta}
							<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="">
						{children
							? children
							: data.map((item) => (
									<CarouselItem
										key={item.id}
										className="pl-[20px] md:max-w-[452px]"
									>
										<DefaultGalleryItem item={item} />
									</CarouselItem>
								))}
					</CarouselContent>
				</Carousel>
			</div>
		</section>
	);
};

export const DefaultGalleryItem: React.FC<{ item: (typeof data)[0] }> = ({
	item,
}) => {
	return (
		<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>
	);
};

export default Gallery;