Scrollspy

"use client";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

type State = "top" | "middle" | "bottom";

const SECTIONS = ["前言", "安裝", "API", "進階", "FAQ"];

export function Scrollspy({ state = "top" }: { state?: State }) {
const activeIdx = state === "top" ? 0 : state === "middle" ? 2 : SECTIONS.length - 1;
const [active, setActive] = useState(activeIdx);
useEffect(() => setActive(activeIdx), [activeIdx]);

return (
  <div className="grid w-full max-w-md grid-cols-[140px_1fr] gap-4">
    <aside className="space-y-0.5 self-start border-l border-border pl-3">
      {SECTIONS.map((s, i) => (
        <button
          key={s}
          onClick={() => setActive(i)}
          className={cn(
            "block w-full text-left text-xs transition",
            i === active
              ? "border-l-2 border-lab-accent -ml-[13px] pl-3 text-lab-accent"
              : "text-muted-foreground hover:text-foreground",
          )}
        >
          {s}
        </button>
      ))}
    </aside>
    <div className="space-y-3 rounded-lg border border-border bg-background/30 p-3">
      {SECTIONS.map((s, i) => (
        <div
          key={s}
          className={cn(
            "rounded-md px-3 py-2 text-xs transition",
            i === active ? "bg-lab-accent/10 ring-1 ring-lab-accent/30" : "bg-background/40",
          )}
        >
          <p className="font-medium text-foreground">{s}</p>
          <p className="mt-1 text-muted-foreground">假內容假內容假內容⋯</p>
        </div>
      ))}
    </div>
  </div>
);
}