// title: Canvas toolbar with theme toggle and zoom controls "use client"; import { MaximizeIcon, MinusIcon, MoonIcon, PlusIcon, RotateCcwIcon, SunIcon, } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { ToggleGroup, ToggleGroupItem, } from "@/registry/default/ui/toggle-group"; import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, } from "@/registry/default/ui/toolbar"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; const ZOOM_LEVELS = [50, 75, 100, 125, 150, 200]; export function Pattern() { const [zoom, setZoom] = useState(100); const zoomIn = () => setZoom( (z) => ZOOM_LEVELS[ Math.min(ZOOM_LEVELS.indexOf(z) + 1, ZOOM_LEVELS.length - 1) ] ?? z, ); const zoomOut = () => setZoom((z) => ZOOM_LEVELS[Math.max(ZOOM_LEVELS.indexOf(z) - 1, 0)] ?? z); return ( } > } /> Light mode } > } /> Dark mode } > } /> Zoom out {zoom}% } > } /> Zoom in setZoom(100)} render={