feature: Add title to bookmarks and allow editing them. Fixes #27

1 files changed, 26 insertions, 1 deletions

diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 40794eb2..2d6dee6b 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -4,6 +4,13 @@ import { cn } from "@/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "./tooltip";
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
@@ -24,6 +31,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
+        none: "",
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
@@ -57,4 +65,21 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+const ButtonWithTooltip = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { tooltip: string; delayDuration?: number }
+>(({ tooltip, delayDuration, ...props }, ref) => {
+  return (
+    <Tooltip delayDuration={delayDuration}>
+      <TooltipTrigger>
+        <Button ref={ref} {...props} />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  );
+});
+ButtonWithTooltip.displayName = "ButtonWithTooltip";
+
+export { Button, buttonVariants, ButtonWithTooltip };