QuickandClaude Opus 4.7
932f3c3908
Replace the eight inconsistent back affordances across user-facing pages with a single absolute-positioned chevron pill, so the control lives in the same screen position regardless of title length or hero content. DetailBreadcrumb keeps its textual hierarchy path but no longer owns the back chevron; PageBack does. DetailHero gains a topNav slot consumed by Movie/Series/Season/Episode/Request detail pages. Non-hero pages drop their bespoke back buttons and add PageBack inside a relative wrapper. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
21 lines
605 B
TypeScript
21 lines
605 B
TypeScript
import { ChevronLeft } from "lucide-react";
|
|
import { useNavigate } from "react-router";
|
|
|
|
interface PageBackProps {
|
|
label?: string;
|
|
}
|
|
|
|
export default function PageBack({ label = "Go back" }: PageBackProps) {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label={label}
|
|
onClick={() => navigate(-1)}
|
|
className="glass-subtle text-muted-foreground hover:text-foreground absolute top-4 left-4 z-20 flex items-center justify-center rounded-full p-1.5 transition-colors sm:top-6 sm:left-6"
|
|
>
|
|
<ChevronLeft className="size-5" />
|
|
</button>
|
|
);
|
|
}
|