50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { fetchApi, API_BASE_URL } from "@/lib/api";
|
|
import PhotoEditor from "@/components/PhotoEditor";
|
|
import { ChevronLeft, Download } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default async function PhotoDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
|
const { id: encodedId } = await params;
|
|
const id = decodeURIComponent(encodedId);
|
|
let photo = null;
|
|
|
|
try {
|
|
const response = await fetchApi('/api/all-data');
|
|
photo = response.data.find((p: any) => p.filename === id);
|
|
} catch (error) {
|
|
console.error("Error fetching photo detail:", error);
|
|
}
|
|
|
|
if (!photo) {
|
|
return <div className="p-12 text-center">Session non trouvée.</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors"
|
|
>
|
|
<ChevronLeft size={20} />
|
|
Retour à la galerie
|
|
</Link>
|
|
|
|
<div className="flex gap-3">
|
|
<a
|
|
href={`${API_BASE_URL}/uploads/images/${id}`}
|
|
download
|
|
className="flex items-center gap-2 bg-slate-800 hover:bg-slate-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
<Download size={18} />
|
|
Image Originale
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<PhotoEditor initialPhoto={photo} />
|
|
</div>
|
|
);
|
|
}
|