admin
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { getNeighborImageIds } from "@/lib/db/queries";
|
|
import { ImageNav } from "@/components/image/ImageNav";
|
|
|
|
export default async function ImageLayout({
|
|
children,
|
|
params,
|
|
}: {
|
|
children: React.ReactNode;
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = await params;
|
|
const numId = Number(id);
|
|
const neighbors = Number.isFinite(numId)
|
|
? getNeighborImageIds(numId)
|
|
: { prev: null, next: null };
|
|
|
|
return (
|
|
<div className="max-w-[1600px] mx-auto px-6 pt-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<Link href="/" className="inline-flex items-center gap-1 text-sm text-[var(--color-fg-dim)] hover:text-[var(--color-fg)]">
|
|
<ArrowLeft className="w-4 h-4" /> Back to library
|
|
</Link>
|
|
<ImageNav
|
|
prev={neighbors.prev}
|
|
next={neighbors.next}
|
|
randomEndpoint={`/image/random?exclude=${numId}`}
|
|
/>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|