implement nav chrome for bookmark previewer

packages/web/src/components/button.tsx

@@ -1,5 +1,10 @@
+import { Link, type AnyRouter, type LinkComponentProps, type RegisteredRouter } from "@tanstack/react-router"
 import { twMerge } from "tailwind-merge"
 
+interface ButtonProps {
+	variant?: keyof typeof VARIANT_CLASSES
+}
+
 const VARIANT_CLASSES = {
 	light:
 		"px-4 py-2 md:py-0 font-bold border border-2 border-b-4 border-stone-200 enabled:active:bg-stone-200 enabled:active:text-stone-800 enabled:active:border-b-1 enabled:hover:bg-stone-600 focus:bg-stone-600 focus:ring-0 focus:outline-none enabled:active:translate-y-0.5",
@@ -12,9 +17,7 @@ function Button({
 	variant = "normal",
 	disabled,
 	...props
-}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-	variant?: keyof typeof VARIANT_CLASSES
-}) {
+}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & ButtonProps) {
 	return (
 		<button
 			disabled={disabled}
@@ -29,4 +32,25 @@ function Button({
 	)
 }
 
-export { Button }
+function LinkButton<
+	TRouter extends AnyRouter = RegisteredRouter,
+	const TFrom extends string = string,
+	const TTo extends string | undefined = undefined,
+	const TMaskFrom extends string = TFrom,
+	const TMaskTo extends string = "",
+>({
+	ref,
+	variant = "normal",
+	className,
+	...props
+}: LinkComponentProps<"a", TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & ButtonProps) {
+	return (
+		<Link
+			ref={ref}
+			className={twMerge(VARIANT_CLASSES[variant], "disabled:text-stone-500 disabled:cursor-not-allowed", className)}
+			{...props}
+		/>
+	)
+}
+
+export { Button, LinkButton }