119 lines
2.8 KiB
TypeScript
119 lines
2.8 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";
|
|
import Lightbox from "yet-another-react-lightbox";
|
|
import "yet-another-react-lightbox/styles.css";
|
|
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
|
import { useState } from "react";
|
|
|
|
export default function PhotoGallery() {
|
|
const {
|
|
data,
|
|
error: mediaError,
|
|
isLoading,
|
|
success,
|
|
setPage,
|
|
setLimit,
|
|
mutate,
|
|
} = useMedia();
|
|
|
|
const [index, setIndex] = useState<number | null>(null);
|
|
|
|
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, idx) => (
|
|
<div
|
|
key={photo.id}
|
|
className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
|
|
onClick={() => setIndex(idx)}
|
|
>
|
|
<Image
|
|
src={photo.url || "/placeholder.svg"}
|
|
alt={photo.alt}
|
|
width={300}
|
|
height={300}
|
|
unoptimized
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
<Lightbox
|
|
open={index !== null}
|
|
close={() => setIndex(null)}
|
|
slides={data?.items.map((i) => ({ src: i.url }))}
|
|
index={index ?? 0}
|
|
plugins={[Zoom]}
|
|
/>
|
|
</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>
|
|
);
|
|
}
|