trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 14:44:12 +00:00
Code Issues 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
Download patch file Download diff file Expand all files Collapse all files

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 { 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>
);
}