Glass TOC

1import { cn } from '@/lib/utils';
2 
3export interface GlassTOCItem {
4  label: string;
5  href: string;
6  active?: boolean;
7}
8 
9export interface GlassTOCProps extends Omit<React.ComponentProps<'nav'>, 'title'> {
10  title?: string;
11  items: GlassTOCItem[];
12}
13 
14export function GlassTOC({ title = 'On this page', items, className, ...props }: GlassTOCProps) {
15  return (
16    <nav
17      className={cn('rounded-2xl border border-glass-border bg-glass p-5 text-[0.8125rem] backdrop-blur-xl', className)}
18      {...props}
19    >
20      <p className="font-mono text-[0.75rem] tracking-[0.2em] text-muted-foreground uppercase">{title}</p>
21      <ul className="mt-3 space-y-2 text-muted-foreground">
22        {items.map((item) => (
23          <li key={item.href}>
24            <a href={item.href} className={item.active ? 'text-ruri dark:text-ruri-soft' : 'hover:text-foreground'}>
25              {item.label}
26            </a>
27          </li>
28        ))}
29      </ul>
30    </nav>
31  );
32}