trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add tooltips to toolbar

Browse source
This commit is contained in:
trafficlunar 2024-12-18 21:11:47 +00:00
parent e7fd155c50
commit a2f03bbaf0
3 changed files with 86 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -18,6 +18,7 @@
"@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slider": "^1.2.2",
"@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.6",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"lucide-react": "^0.464.0", "lucide-react": "^0.464.0",

76
src/components/toolbar/index.tsx
View file

@ -2,6 +2,7 @@ import { useContext } from "react";
import { EraserIcon, HandIcon, PencilIcon, ZoomInIcon } from "lucide-react"; import { EraserIcon, HandIcon, PencilIcon, ZoomInIcon } from "lucide-react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { ToolContext } from "@/context/Tool"; import { ToolContext } from "@/context/Tool";
function Toolbar() { function Toolbar() {
@ -10,25 +11,62 @@ function Toolbar() {
const onToolChange = (value: string) => setTool(value as Tool); const onToolChange = (value: string) => setTool(value as Tool);
return ( return (
<ToggleGroup <TooltipProvider>
type="single" <ToggleGroup
value={tool} type="single"
onValueChange={onToolChange} value={tool}
className="flex flex-col justify-start py-1 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950" 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 /> {/* Hand */}
</ToggleGroupItem> <Tooltip delayDuration={0}>
<ToggleGroupItem value="pencil" className="!p-0 !h-8 !min-w-8"> <TooltipTrigger>
<PencilIcon /> <ToggleGroupItem value="hand" className="!p-0 !h-8 !min-w-8">
</ToggleGroupItem> <HandIcon />
<ToggleGroupItem value="eraser" className="!p-0 !h-8 !min-w-8"> </ToggleGroupItem>
<EraserIcon /> </TooltipTrigger>
</ToggleGroupItem> <TooltipContent side="right" sideOffset={10}>
<ToggleGroupItem value="zoom" className="!p-0 !h-8 !min-w-8"> <p>Hand (1)</p>
<ZoomInIcon /> </TooltipContent>
</ToggleGroupItem> </Tooltip>
</ToggleGroup>
{/* 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>
); );
} }

28
src/components/ui/tooltip.tsx Normal file
View file

@ -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 }