1import { Link, useCanGoBack, useRouter } from "@tanstack/react-router";
 2import type { LinkProps } from "@tanstack/react-router";
 3import { ArrowLeft } from "lucide-react";
 4
 5// A "Back to ..." link that uses browser history when available,
 6// falling back to a typed Link destination otherwise.
 7// This preserves scroll position and filter state when navigating
 8// back from a detail page to a list.
 9export function BackLink({
10  children,
11  ...fallbackProps
12}: LinkProps & { children: React.ReactNode }) {
13  const canGoBack = useCanGoBack();
14  const router = useRouter();
15
16  if (canGoBack) {
17    return (
18      <button
19        onClick={() => router.history.back()}
20        className="text-muted-foreground hover:text-foreground mb-4 flex items-center gap-1.5 text-sm"
21      >
22        <ArrowLeft className="size-3.5" />
23        {children}
24      </button>
25    );
26  }
27
28  return (
29    <Link
30      {...fallbackProps}
31      className="text-muted-foreground hover:text-foreground mb-4 flex items-center gap-1.5 text-sm"
32    >
33      <ArrowLeft className="size-3.5" />
34      {children}
35    </Link>
36  );
37}