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 { useRef, useState } from "react";
import { PanelLeft } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
SnapPanel,
SnapPanelGroup,
SnapPanelHandle,
type SnapPanelGroupHandle,
} from "@/components/ui/snap-panels";
const THREADS = [
{ from: "Priya Raman", subject: "Retry budgets", time: "09:41" },
{ from: "Marco Reyes", subject: "Token accounting", time: "09:06" },
{ from: "Dana Whitfield", subject: "Regional routing", time: "08:58" },
{ from: "Sofia Lindqvist", subject: "Stream backpressure", time: "08:31" },
{ from: "Omar Haddad", subject: "Structured outputs", time: "Yesterday" },
];
const initials = (name: string) =>
name
.split(" ")
.map((part) => part[0])
.join("");
export default function SnapPanelsCollapsibleExample() {
const groupRef = useRef<SnapPanelGroupHandle>(null);
const [collapsed, setCollapsed] = useState(false);
return (
<div className="h-64 w-full max-w-xl overflow-hidden rounded-lg border border-border bg-card">
<SnapPanelGroup ref={groupRef} direction="horizontal">
<SnapPanel
id="threads"
defaultSize="240px"
minSize="180px"
snapPoints={["240px", "320px"]}
collapsible
onCollapse={() => setCollapsed(true)}
onExpand={() => setCollapsed(false)}
>
<div className="flex h-full flex-col gap-px bg-background p-1.5">
{THREADS.map((thread) => (
<div
key={thread.from}
className={cn(
"flex items-center gap-2 rounded-md px-2 py-1.5",
thread.from === "Priya Raman" && "bg-active",
)}
>
<span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-2xs text-muted-foreground">
{initials(thread.from)}
</span>
<div className="flex min-w-0 flex-col">
<span className="truncate text-caption text-foreground">
{thread.from}
</span>
<span className="truncate text-2xs text-muted-foreground">
{thread.subject}
</span>
</div>
<span className="ml-auto shrink-0 self-start font-mono text-2xs text-muted-foreground">
{thread.time}
</span>
</div>
))}
</div>
</SnapPanel>
<SnapPanelHandle aria-label="Resize thread list" />
<SnapPanel id="reading" minSize={30}>
<div className="flex h-full flex-col">
<div className="flex h-11 shrink-0 items-center gap-2 border-b border-border px-3">
<Button
variant="outline"
size="sm"
onClick={() => groupRef.current?.toggle("threads")}
aria-pressed={collapsed}
>
<PanelLeft className="size-4" />
{collapsed ? "Show threads" : "Hide threads"}
</Button>
</div>
<div className="flex flex-col gap-2 p-3">
<span className="text-control text-foreground">
Retry budgets
</span>
<p className="text-caption text-muted-foreground">
Collapse it with the button, then drag the divider back out.
Both cross the dead band below the minimum width under your hand
rather than jumping across it.
</p>
</div>
</div>
</SnapPanel>
</SnapPanelGroup>
</div>
);
}
