60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import useMedia from "@/hooks/use-media";
|
|
import { CarouselItem } from "./ui/carousel";
|
|
import { Loader2 } from "lucide-react";
|
|
import { useState } from "react";
|
|
import Lightbox, { SlideImage } from "yet-another-react-lightbox";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
|
|
|
export default function HomepageGalleryItems() {
|
|
const {
|
|
data,
|
|
error,
|
|
mutate,
|
|
setPage,
|
|
success,
|
|
setLimit,
|
|
isLoading,
|
|
isValidating,
|
|
} = useMedia(20);
|
|
|
|
const [index, setIndex] = useState<number | null>(null);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center w-full h-full">
|
|
<Loader2 className="animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{data?.items.map((i, idx) => (
|
|
<CarouselItem
|
|
key={i.id}
|
|
onClick={() => setIndex(idx)}
|
|
className="pl-[20px] md:max-w-[452px] cursor-pointer"
|
|
>
|
|
<div className="w-full aspect-square">
|
|
<img
|
|
src={i.url}
|
|
alt={i.alt}
|
|
className="inset-0 border rounded-sm w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
<Lightbox
|
|
open={index !== null}
|
|
close={() => setIndex(null)}
|
|
slides={data?.items.map((i) => ({ src: i.url }))}
|
|
index={index ?? 0}
|
|
plugins={[Zoom]}
|
|
/>
|
|
</>
|
|
);
|
|
}
|