Spaces:
Sleeping
Sleeping
File size: 1,887 Bytes
d725335 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import { ListChecks, SlidersHorizontal, TestTube, Zap } from "lucide-react"
import type { LucideIcon } from "lucide-react"
import { SECTIONS, type SectionId } from "@/modules/registry"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
const SECTION_ICON: Record<SectionId, LucideIcon> = {
test: TestTube,
automation: ListChecks,
settings: SlidersHorizontal,
}
export function Sidebar() {
return (
<aside className="sticky top-0 hidden h-screen w-16 shrink-0 flex-col items-center border-r border-border/60 bg-card/40 py-4 backdrop-blur-sm md:flex">
<a
href="#top"
className="flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-[0_8px_24px_-12px_oklch(0.885_0.19_122_/_0.8)]"
aria-label="Tiny Trigger"
>
<Zap className="size-5" />
</a>
<nav className="mt-6 flex flex-1 flex-col items-center gap-1.5">
<TooltipProvider delayDuration={200}>
{SECTIONS.map((s) => {
const Icon = SECTION_ICON[s.id]
return (
<Tooltip key={s.id}>
<TooltipTrigger asChild>
<a
href={`#${s.id}`}
className="group flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/5 hover:text-foreground"
>
<Icon className="size-4" />
</a>
</TooltipTrigger>
<TooltipContent side="right">{s.label}</TooltipContent>
</Tooltip>
)
})}
</TooltipProvider>
</nav>
<div className="font-mono text-[0.5rem] uppercase tracking-[0.2em] text-muted-foreground/50 [writing-mode:vertical-rl]">
local-first
</div>
</aside>
)
}
|