A keyboard-navigable file/folder tree view where each expanding branch swings open like a carpenter's folding rule around a hinged pivot, with rows unfolding in sequence and collapsing faster than they open.
"use client";
import { FoldingRule, type RuleNode } from "@/components/ui/tree-hinge-fold";
const nodes: RuleNode[] = [
{
id: "src",
label: "src",
children: [
{
id: "components",
label: "components",
children: [
{ id: "button", label: "button.tsx" },
{ id: "dialog", label: "dialog.tsx" },
{ id: "tabs", label: "tabs.tsx" },
],
},
{ id: "lib", label: "lib" },
{ id: "index", label: "index.ts" },
],
},
{ id: "scripts", label: "scripts" },
{ id: "package", label: "package.json" },
{ id: "readme", label: "README.md" },
];
export default function TreeHingeFoldDemo() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10">
<div className="w-full max-w-sm rounded-lg border border-border bg-surface p-4">
<FoldingRule nodes={nodes} defaultExpanded={["src", "components"]} />
</div>
</div>
);
}