44 lines
826 B
TypeScript
44 lines
826 B
TypeScript
"use client";
|
|
|
|
import useMedia from "@/hooks/use-media";
|
|
import { CarouselItem } from "./ui/carousel";
|
|
import Image from "next/image";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function HomepageGalleryItems() {
|
|
const {
|
|
data,
|
|
error,
|
|
mutate,
|
|
setPage,
|
|
success,
|
|
setLimit,
|
|
isLoading,
|
|
isValidating,
|
|
} = useMedia(20);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center w-full h-full">
|
|
<Loader2 className="animate-spin" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{data?.items.map((i) => (
|
|
<CarouselItem className="pl-[20px] md:max-w-[452px]">
|
|
<div className="w-full aspect-square" key={i.id}>
|
|
<img
|
|
src={i.url}
|
|
alt={i.alt}
|
|
className="inset-0 border rounded-sm w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</>
|
|
);
|
|
}
|