Sidebar rail

1"use client";
2 
3import * as React from "react";
4import type { LucideIcon } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import {
8  Tooltip,
9  TooltipContent,
10  TooltipProvider,
11  TooltipTrigger,
12} from "@/registry/blacksite/ui/tooltip";
13 
14export interface SidebarRailItem {
15  id: string;
16  icon: LucideIcon;
17  label: string;
18  badge?: React.ReactNode;
19  onSelect?: () => void;
20  disabled?: boolean;
21}
22 
23interface SidebarRailProps extends React.HTMLAttributes<HTMLElement> {
24  items: SidebarRailItem[];
25  footerItems?: SidebarRailItem[];
26  activeId?: string;
27  onActiveChange?: (id: string) => void;
28}
29 
30const SidebarRail = React.forwardRef<HTMLElement, SidebarRailProps>(
31  ({ className, items, footerItems, activeId, onActiveChange, ...props }, ref) => {
32    return (
33      <TooltipProvider delayDuration={150}>
34        <nav
35          ref={ref}
36          aria-label="Primary"
37          className={cn(
38            "border-border bg-background-elevated flex w-12 flex-col items-center gap-1 border-r py-2",
39            className,
40          )}
41          {...props}
42        >
43          <div className="flex flex-col items-center gap-1">
44            {items.map((item) => (
45              <RailButton
46                key={item.id}
47                item={item}
48                active={item.id === activeId}
49                onClick={() => {
50                  if (item.disabled) return;
51                  item.onSelect?.();
52                  onActiveChange?.(item.id);
53                }}
54              />
55            ))}
56          </div>
57          {footerItems && footerItems.length > 0 && (
58            <>
59              <div className="flex-1" />
60              <div className="flex flex-col items-center gap-1">
61                {footerItems.map((item) => (
62                  <RailButton
63                    key={item.id}
64                    item={item}
65                    active={item.id === activeId}
66                    onClick={() => {
67                      if (item.disabled) return;
68                      item.onSelect?.();
69                      onActiveChange?.(item.id);
70                    }}
71                  />
72                ))}
73              </div>
74            </>
75          )}
76        </nav>
77      </TooltipProvider>
78    );
79  },
80);
81SidebarRail.displayName = "SidebarRail";
82 
83function RailButton({
84  item,
85  active,
86  onClick,
87}: {
88  item: SidebarRailItem;
89  active?: boolean;
90  onClick?: () => void;
91}) {
92  const Icon = item.icon;
93  return (
94    <Tooltip>
95      <TooltipTrigger asChild>
96// … truncated