Gallery

Events still not working

frontend/app/(main)/gallery/page.tsx

@@ -0,0 +1,106 @@
+"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>
+	);
+}