A resizable split-panel layout whose divider magnetically leans toward configured snap points and can be collapsed, used for sidebars, IDE-style layouts, and mail-client panes.
"use client";
import {
SnapPanel,
SnapPanelGroup,
SnapPanelHandle,
type Size,
} from "@/components/ui/snap-panels";
import { useRef } from "react";
import { FileCode2 } from "lucide-react";
import { cn } from "@/lib/utils";
const FILES = [
"client.ts",
"errors.ts",
"providers.ts",
"retry.ts",
"stream.ts",
"tokens.ts",
"types.ts",
"index.ts",
];
const CODE = [
"export async function retry<T>(",
" run: () => Promise<T>,",
" budget: Budget,",
") {",
" while (budget.hasRoom()) {",
" try { return await run(); }",
" catch (error) { budget.spend(error); }",
" }",
" throw budget.exhausted();",
"}",
];
export default function SnapPanelsBasicExample() {
const readoutRef = useRef<HTMLSpanElement>(null);
// `onLayoutChanging` fires every frame, so it writes to the DOM directly.
// Routing it through React state would hand back the per-frame render the
// component's CSS custom property exists to avoid.
const showWidth = (sizes: Size[]) => {
if (readoutRef.current) readoutRef.current.textContent = String(sizes[0]);
};
return (
<div className="h-72 w-full max-w-xl overflow-hidden rounded-lg border border-border bg-card">
<SnapPanelGroup
direction="horizontal"
onLayoutChanging={showWidth}
onLayoutChange={showWidth}
>
<SnapPanel
id="sidebar"
defaultSize="280px"
minSize="200px"
snapPoints={["280px", "380px"]}
collapsible
>
<div className="flex h-full flex-col bg-background">
<div className="flex h-9 shrink-0 items-center border-b border-border px-3.5">
<span className="text-label text-muted-foreground uppercase">
src
</span>
</div>
<div className="flex flex-col gap-px p-1.5">
{FILES.map((file) => (
<span
key={file}
className={cn(
"flex items-center gap-2 truncate rounded-md px-2 py-1 font-mono text-2xs",
file === "retry.ts"
? "bg-active text-foreground"
: "text-muted-foreground",
)}
>
<FileCode2 className="size-3 shrink-0 opacity-60" />
{file}
</span>
))}
</div>
</div>
</SnapPanel>
<SnapPanelHandle aria-label="Resize sidebar" />
<SnapPanel id="content" minSize={25}>
<div className="flex h-full flex-col">
<div className="flex h-9 shrink-0 items-center justify-between gap-3 border-b border-border px-3">
<span className="truncate font-mono text-2xs text-foreground">
retry.ts
</span>
<span className="shrink-0 font-mono text-2xs text-muted-foreground">
sidebar{" "}
<span ref={readoutRef} className="tabular-nums text-foreground">
280px
</span>
</span>
</div>
<div className="flex flex-col overflow-hidden p-3">
{CODE.map((line, index) => (
<span
key={line}
className="flex gap-3 truncate whitespace-pre font-mono text-2xs leading-5"
>
<span className="w-3 shrink-0 text-right text-muted-foreground/50 tabular-nums">
{index + 1}
</span>
<span className="text-muted-foreground">{line}</span>
</span>
))}
</div>
</div>
</SnapPanel>
</SnapPanelGroup>
</div>
);
}
