107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationItem,
|
|
PaginationLink,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from "@/components/ui/pagination";
|
|
import useMedia from "@/hooks/use-media";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function PhotoGallery() {
|
|
const {
|
|
data,
|
|
error: mediaError,
|
|
isLoading,
|
|
success,
|
|
setPage,
|
|
setLimit,
|
|
mutate,
|
|
} = useMedia();
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-3xl font-bold">Gallerie Photo</h1>
|
|
</div>
|
|
{isLoading ? (
|
|
<div className="flex w-full h-full justify-center">
|
|
<Loader2 className="animate-spin" />
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{data?.items.map((photo) => (
|
|
<div
|
|
key={photo.id}
|
|
className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
|
|
onClick={() => {}}
|
|
>
|
|
<Image
|
|
src={photo.url || "/placeholder.svg"}
|
|
alt={photo.alt}
|
|
width={300}
|
|
height={300}
|
|
unoptimized
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
)
|
|
</div>
|
|
)}
|
|
<Pagination className="mt-8">
|
|
<PaginationContent>
|
|
<PaginationItem>
|
|
<PaginationPrevious
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setPage((prev) => Math.max(prev - 1, 1));
|
|
}}
|
|
className={
|
|
data?.page === 1
|
|
? "pointer-events-none opacity-50"
|
|
: ""
|
|
}
|
|
/>
|
|
</PaginationItem>
|
|
{[...Array(data?.totalPages)].map((_, i) => (
|
|
<PaginationItem key={i + 1}>
|
|
<PaginationLink
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setPage(i + 1);
|
|
}}
|
|
isActive={data?.page === i + 1}
|
|
>
|
|
{i + 1}
|
|
</PaginationLink>
|
|
</PaginationItem>
|
|
))}
|
|
<PaginationItem>
|
|
<PaginationNext
|
|
href="#"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setPage((prev) =>
|
|
Math.min(prev + 1, data?.totalPages ?? 1),
|
|
);
|
|
}}
|
|
className={
|
|
data?.page === data?.totalPages
|
|
? "pointer-events-none opacity-50"
|
|
: ""
|
|
}
|
|
/>
|
|
</PaginationItem>
|
|
</PaginationContent>
|
|
</Pagination>
|
|
</div>
|
|
);
|
|
}
|