From a2f03bbaf0d0529a96565a9c9c7854965d52cb89 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Wed, 18 Dec 2024 21:11:47 +0000
Subject: [PATCH] feat: add tooltips to toolbar

---
 package.json                     |  1 +
 src/components/toolbar/index.tsx | 76 ++++++++++++++++++++++++--------
 src/components/ui/tooltip.tsx    | 28 ++++++++++++
 3 files changed, 86 insertions(+), 19 deletions(-)
 create mode 100644 src/components/ui/tooltip.tsx

diff --git a/package.json b/package.json
index 28d2f3d..fafe1c3 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.464.0",
diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
index 2b2ff47..78afbe0 100644
--- a/src/components/toolbar/index.tsx
+++ b/src/components/toolbar/index.tsx
@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { EraserIcon, HandIcon, PencilIcon, ZoomInIcon } from "lucide-react";
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { ToolContext } from "@/context/Tool";
 
 function Toolbar() {
@@ -10,25 +11,62 @@ function Toolbar() {
 	const onToolChange = (value: string) => setTool(value as Tool);
 
 	return (
-		<ToggleGroup
-			type="single"
-			value={tool}
-			onValueChange={onToolChange}
-			className="flex flex-col justify-start py-1 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
-		>
-			<ToggleGroupItem value="hand" className="!p-0 !h-8 !min-w-8">
-				<HandIcon />
-			</ToggleGroupItem>
-			<ToggleGroupItem value="pencil" className="!p-0 !h-8 !min-w-8">
-				<PencilIcon />
-			</ToggleGroupItem>
-			<ToggleGroupItem value="eraser" className="!p-0 !h-8 !min-w-8">
-				<EraserIcon />
-			</ToggleGroupItem>
-			<ToggleGroupItem value="zoom" className="!p-0 !h-8 !min-w-8">
-				<ZoomInIcon />
-			</ToggleGroupItem>
-		</ToggleGroup>
+		<TooltipProvider>
+			<ToggleGroup
+				type="single"
+				value={tool}
+				onValueChange={onToolChange}
+				className="flex flex-col justify-start py-1 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
+			>
+				{/* Hand */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
+						<ToggleGroupItem value="hand" className="!p-0 !h-8 !min-w-8">
+							<HandIcon />
+						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Hand (1)</p>
+					</TooltipContent>
+				</Tooltip>
+
+				{/* Pencil */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
+						<ToggleGroupItem value="pencil" className="!p-0 !h-8 !min-w-8">
+							<PencilIcon />
+						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Pencil (2)</p>
+					</TooltipContent>
+				</Tooltip>
+
+				{/* Eraser */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
+						<ToggleGroupItem value="eraser" className="!p-0 !h-8 !min-w-8">
+							<EraserIcon />
+						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Eraser (3)</p>
+					</TooltipContent>
+				</Tooltip>
+
+				{/* Zoom */}
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger>
+						<ToggleGroupItem value="zoom" className="!p-0 !h-8 !min-w-8">
+							<ZoomInIcon />
+						</ToggleGroupItem>
+					</TooltipTrigger>
+					<TooltipContent side="right" sideOffset={10}>
+						<p>Zoom (4)</p>
+					</TooltipContent>
+				</Tooltip>
+			</ToggleGroup>
+		</TooltipProvider>
 	);
 }
 
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..8fa1088
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }