kami
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Link } from '@tanstack/react-router';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
|
|
interface BackLinkProps {
|
|
/** Fallback destination if there's no browser history to go back to (e.g. deep-linked). */
|
|
to: string;
|
|
label: string;
|
|
}
|
|
|
|
/**
|
|
* Browser-history-aware back affordance. Prefers `history.back()` when the
|
|
* router has a previous entry (so a user who deep-linked to an album from
|
|
* Search returns to Search, not to the Albums index); falls back to a
|
|
* normal `<Link>` for direct entries.
|
|
*
|
|
* Detail pages used to hard-code `<Link to="/albums">` which broke that
|
|
* mental model — this fixes it across AlbumDetail / ArtistDetail / Genres.
|
|
*/
|
|
export function BackLink({ to, label }: BackLinkProps) {
|
|
// window.history.length === 1 means this tab was opened directly to the
|
|
// current URL — there's nothing to go back to, so render a real link.
|
|
const canGoBack = typeof window !== 'undefined' && window.history.length > 1;
|
|
if (canGoBack) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => window.history.back()}
|
|
className="inline-flex items-center gap-1 text-sm text-muted hover:text-text transition-colors"
|
|
>
|
|
<ArrowLeft size={16} /> {label}
|
|
</button>
|
|
);
|
|
}
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className="inline-flex items-center gap-1 text-sm text-muted hover:text-text transition-colors"
|
|
>
|
|
<ArrowLeft size={16} /> {label}
|
|
</Link>
|
|
);
|
|
}
|