Rail

1"use client";
2 
3import * as React from "react";
4import "./rail.css";
5import { useScrollspy, smoothScrollTo } from "@/components/moco/hooks";
6 
7export interface Heading {
8  id: string;
9  text: string;
10  level?: number;
11}
12 
13export interface RailProps {
14  headings: Heading[];
15}
16 
17/** Left-edge minimap: one tick per H2. Hidden below 1280px. */
18export function Rail({ headings }: RailProps) {
19  const ids = React.useMemo(() => headings.map((h) => h.id), [headings]);
20  const active = useScrollspy(ids);
21  if (!headings.length) return null;
22 
23  return (
24    <nav className="moco-rail" aria-label="Sections">
25      {headings.map((h, i) => (
26        <button
27          key={h.id}
28          type="button"
29          className="moco-rail-item"
30          aria-current={i === active}
31          aria-label={`Jump to ${h.text}`}
32          onClick={() => smoothScrollTo(h.id)}
33        >
34          <span className="moco-rail-tick" aria-hidden="true" />
35          <span className="moco-rail-label" aria-hidden="true">
36            {h.text}
37          </span>
38        </button>
39      ))}
40    </nav>
41  );
42}