Something went wrong. Try again.
An atproto Tilemap editor
Something went wrong. Try again.
1.7 kB · 55 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { Brush, Circle, Crosshair, Dot, Eraser, Grid2x2, Hand, Move, PaintBucket, RotateCw, Scaling, Spline, Square, SquareDashed, Stamp } from 'lucide-react'import { type MapTool, MAP_TOOLS, useMapStore } from '../store/mapStore'import { Button } from '@/components/ui/button'import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
/** Tool id → lucide icon. */export const TOOL_ICONS: Record<MapTool, typeof Hand> = { pan: Hand, move: Move, rotate: RotateCw, scale: Scaling, stamp: Stamp, tile: Grid2x2, paint: Brush, fill: PaintBucket, rect: SquareDashed, circle: Circle, path: Spline, dot: Dot, area: Square, erase: Eraser, slice: Crosshair,}
/** A vertical list of tool buttons for the given tool ids, wired to the store. */export default function MapToolButtons({ tools }: { tools: MapTool[] }) { const tool = useMapStore((s) => s.tool) const setTool = useMapStore((s) => s.setTool) const defs = MAP_TOOLS.filter((t) => tools.includes(t.id))
return ( <div className="flex flex-col gap-1"> {defs.map((t) => { const Icon = TOOL_ICONS[t.id] return ( <Tooltip key={t.id}> <TooltipTrigger asChild> <Button type="button" variant={tool === t.id ? 'default' : 'outline'} size="sm" className="w-full justify-start gap-2.5" onClick={() => setTool(t.id)} > <Icon className="size-4" /> {t.label} </Button> </TooltipTrigger> <TooltipContent side="left">{t.hint}</TooltipContent> </Tooltip> ) })} </div> )}