Files
v2.app.gaertan.art/src/components/artworks/ContextBackButton.tsx

44 lines
1.2 KiB
TypeScript

"use client";
import { ArrowLeftIcon } from "lucide-react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
const FROM_TO_PATH: Record<string, string> = {
portfolio: "/portfolio",
"animal-studies": "/animal-studies",
};
export function ContextBackButton() {
const router = useRouter();
const sp = useSearchParams();
const from = sp.get("from") ?? "";
const target = FROM_TO_PATH[from];
if (!target) return null;
return (
<div className="w-full max-w-xl">
<Link
href={target}
className={[
"inline-flex items-center gap-2 rounded-md border px-3 py-2",
"text-sm text-muted-foreground hover:text-foreground",
"hover:bg-muted transition-colors",
].join(" ")}
onClick={(e) => {
// If user has real history, prefer back; otherwise use link target.
// (Prevents “dead end” if they opened single page directly in new tab.)
if (window.history.length > 1) {
e.preventDefault();
router.back();
}
}}
>
<ArrowLeftIcon className="h-4 w-4" />
Back
</Link>
</div>
);
}