Something went wrong. Try again.
An atproto Tilemap editor
Something went wrong. Try again.
1.2 kB · 32 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233import { FolderOpen } from 'lucide-react'import { TOOL } from '@/lib/editorMeta'import { useUiStore } from '../store/uiStore'import { Button } from '@/components/ui/button'
/** Header for an editor's tools sidebar: the current-tool indicator on the left, * and a button that swaps the sidebar over to the document library. The mirror * of the "Tools" button the library view shows. */export default function ToolsHeader() { const editorKind = useUiStore((s) => s.editorKind) const setSidebarView = useUiStore((s) => s.setSidebarView) const { label, icon: Icon } = TOOL[editorKind]
return ( <div className="flex items-center justify-between gap-2"> <div className="flex min-w-0 items-center gap-2"> <Icon className="size-4 shrink-0 text-muted-foreground" /> <h1 className="truncate text-base font-semibold tracking-tight">{label}</h1> </div> <Button type="button" variant="ghost" size="sm" className="shrink-0 text-muted-foreground" onClick={() => setSidebarView('library')} > <FolderOpen data-icon="inline-start" /> Library </Button> </div> )}