Resizable

TSX
"use client";

import * as React from "react";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const sections: { id: string; title: string; intro: string; detail: React.ReactNode }[] = [
  {
    id: "overview",
    title: "Overview",
    intro:
      "The API is organized around REST. It accepts JSON request bodies, returns JSON responses, and uses standard HTTP status codes.",
    detail:
      "All requests go to a single versioned base URL, so upgrading is an explicit change on your side.",
  },
  {
    id: "authentication",
    title: "Authentication",
    intro:
      "Every request needs a secret key in the Authorization header. Keys are scoped to a workspace and can be rotated from the dashboard at any time without downtime.",
    detail:
      <>
        Use test keys while you build. They never touch live data and start
        with the{" "}
        <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground">
          sk_test_
        </code>{" "}
        prefix.
      </>,
  },
  {
    id: "rate-limits",
    title: "Rate limits",
    intro:
      "Each key can make 100 read and 25 write requests per second. Bursts above that return a 429 response.",
    detail:
      "Retry after the number of seconds in the Retry-After header, with exponential backoff.",
  },
  {
    id: "webhooks",
    title: "Webhooks",
    intro:
      "Webhooks notify your server when events happen in your workspace, such as a paid invoice or a failed charge.",
    detail:
      "Verify every delivery with the signing secret before you trust its payload.",
  },
  {
    id: "errors",
    title: "Errors",
    intro:
      "Codes in the 4xx range mean the request was wrong, and the body explains which field to fix.",
    detail:
      "Codes in the 5xx range are rare and safe to retry with the same idempotency key.",
  },
];

export default function Resizable01() {
  const [activeId, setActiveId] = React.useState("authentication");
  const active =
    sections.find((section) => section.id === activeId) ?? sections[0];

  return (
    <div className="h-72 w-full max-w-xl">
      <ResizablePanelGroup className="rounded-lg border bg-background">
        <ResizablePanel id="outline" defaultSize="32%" minSize="24%">
          <nav aria-label="API guide" className="flex h-full flex-col p-3">
            <span className="px-2 pb-2 text-xs font-medium text-muted-foreground">
              API guide
            </span>
            <ul className="flex flex-col gap-0.5">
              {sections.map((section) => (
                <li key={section.id}>
                  <a
                    href={`#${section.id}`}
                    aria-current={section.id === activeId ? "page" : undefined}
                    onClick={(event) => {
                      event.preventDefault();
                      setActiveId(section.id);
                    }}
                    className="block truncate rounded-md px-2 py-1.5 text-sm text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-muted aria-[current=page]:font-medium aria-[current=page]:text-foreground"
                  >
                    {section.title}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        </ResizablePanel>
        <ResizableHandle withHandle aria-label="Resize guide outline" />
        <ResizablePanel id="article" defaultSize="68%" minSize="40%">
          <article className="flex h-full flex-col gap-2 overflow-hidden p-5">
            <h3 className="text-base font-semibold">{active.title}</h3>
            <p className="text-sm leading-relaxed text-muted-foreground">
              {active.intro}
            </p>
            <p className="text-sm leading-relaxed text-muted-foreground">
              {active.detail}
            </p>
          </article>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

TSX
"use client";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const query = [
  "select plan, count(*) as accounts",
  "from subscriptions",
  "where status = 'active'",
  "group by plan",
  "order by accounts desc;",
];

const rows = [
  { plan: "Team", accounts: "1,284" },
  { plan: "Starter", accounts: "962" },
  { plan: "Business", accounts: "317" },
  { plan: "Enterprise", accounts: "48" },
];

export default function Resizable02() {
  return (
    <div className="h-96 w-full max-w-md">
      <ResizablePanelGroup orientation="vertical">
        <ResizablePanel id="query" defaultSize="45%" minSize="25%">
          <section
            aria-label="Query"
            className="h-full overflow-hidden rounded-lg bg-muted/60 p-4"
          >
            <pre className="font-mono text-xs leading-6 text-foreground">
              {query.map((line, index) => (
                <div key={line} className="flex gap-3">
                  <span
                    aria-hidden="true"
                    className="w-3 shrink-0 text-right text-muted-foreground tabular-nums select-none"
                  >
                    {index + 1}
                  </span>
                  <code className="truncate">{line}</code>
                </div>
              ))}
            </pre>
          </section>
        </ResizablePanel>
        <ResizableHandle
          aria-label="Resize query and results"
          className="bg-transparent before:h-1 before:w-10 before:rounded-full before:bg-border before:transition-colors aria-[orientation=horizontal]:h-3 data-[separator=active]:before:bg-primary data-[separator=focus]:before:bg-ring data-[separator=hover]:before:bg-muted-foreground/50"
        />
        <ResizablePanel id="results" defaultSize="55%" minSize="25%">
          <section
            aria-label="Results"
            className="flex h-full flex-col overflow-y-auto rounded-lg bg-muted/60"
          >
            <div className="flex items-center justify-between px-4 pt-3 pb-2 text-xs text-muted-foreground">
              <span className="font-medium text-foreground">4 rows</span>
              <span className="tabular-nums">38 ms</span>
            </div>
            <table className="w-full text-sm">
              <thead>
                <tr className="border-y text-left text-xs text-muted-foreground">
                  <th scope="col" className="px-4 py-1.5 font-medium">
                    plan
                  </th>
                  <th scope="col" className="px-4 py-1.5 text-right font-medium">
                    accounts
                  </th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr key={row.plan} className="border-b last:border-0">
                    <td className="px-4 py-1.5">{row.plan}</td>
                    <td className="px-4 py-1.5 text-right font-mono text-xs tabular-nums">
                      {row.accounts}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </section>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

TSX
"use client";

import * as React from "react";

import { Badge } from "@/components/ui/badge";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const panels = [
  {
    id: "filters",
    title: "Filters",
    note: "Status, owner, and label facets.",
    defaultSize: 25,
    min: 18,
    max: 35,
  },
  {
    id: "results",
    title: "Results",
    note: "Needs the most room, never below half.",
    defaultSize: 50,
    min: 40,
    max: 70,
  },
  {
    id: "details",
    title: "Details",
    note: "Collapses no further than a summary.",
    defaultSize: 25,
    min: 15,
    max: 35,
  },
];

type Layout = Record<string, number>;

const initialLayout: Layout = Object.fromEntries(
  panels.map((panel) => [panel.id, panel.defaultSize]),
);

export default function Resizable03() {
  const [layout, setLayout] = React.useState<Layout>(initialLayout);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3">
      <div className="h-56 w-full">
        <ResizablePanelGroup
          className="rounded-lg border bg-background"
          onLayoutChange={setLayout}
        >
          {panels.map((panel, index) => {
            const size = layout[panel.id] ?? panel.defaultSize;
            return (
              <React.Fragment key={panel.id}>
                {index > 0 && (
                  <ResizableHandle
                    withHandle
                    aria-label={`Resize ${panels[index - 1].title} and ${panel.title}`}
                  />
                )}
                <ResizablePanel
                  id={panel.id}
                  defaultSize={`${panel.defaultSize}%`}
                  minSize={`${panel.min}%`}
                  maxSize={`${panel.max}%`}
                >
                  <div className="flex h-full min-w-0 flex-col justify-between gap-3 overflow-hidden p-2.5 sm:p-3">
                    <div className="flex flex-col gap-1">
                      <div className="flex flex-wrap items-center justify-between gap-1.5">
                        <h3 className="truncate text-sm font-medium">
                          {panel.title}
                        </h3>
                        <Badge
                          variant="secondary"
                          className="font-mono tabular-nums"
                        >
                          {Math.round(size)}%
                        </Badge>
                      </div>
                      <p className="line-clamp-3 text-xs text-muted-foreground">
                        {panel.note}
                      </p>
                    </div>
                    <RangeTrack size={size} min={panel.min} max={panel.max} />
                  </div>
                </ResizablePanel>
              </React.Fragment>
            );
          })}
        </ResizablePanelGroup>
      </div>
      <p className="text-xs text-muted-foreground">
        Each panel stops at its limits. Drag a handle or focus it and use the
        arrow keys.
      </p>
    </div>
  );
}

function RangeTrack({
  size,
  min,
  max,
}: {
  size: number;
  min: number;
  max: number;
}) {
  const atLimit = Math.round(size) <= min || Math.round(size) >= max;

  return (
    <div className="flex flex-col gap-1.5">
      <div aria-hidden="true" className="relative h-1.5 rounded-full bg-muted">
        <div
          className="absolute inset-y-0 rounded-full bg-primary/15"
          style={{ left: `${min}%`, width: `${max - min}%` }}
        />
        <div
          className="absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-primary transition-[left] duration-75 data-[limit=true]:bg-warning"
          data-limit={atLimit}
          style={{ left: `${size}%` }}
        />
      </div>
      <span className="truncate font-mono text-[0.6875rem] text-muted-foreground tabular-nums">
        {min}–{max}%
      </span>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import {
  CalendarDays,
  ChartNoAxesColumn,
  FolderKanban,
  Inbox,
  PanelLeftClose,
  PanelLeftOpen,
  Settings,
} from "lucide-react";
import type { PanelImperativeHandle } from "react-resizable-panels";

import { Button } from "@/components/ui/button";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const links = [
  { label: "Inbox", icon: Inbox, count: 12 },
  { label: "Projects", icon: FolderKanban },
  { label: "Calendar", icon: CalendarDays },
  { label: "Reports", icon: ChartNoAxesColumn },
  { label: "Settings", icon: Settings },
];

const projects = [
  { name: "Checkout redesign", due: "Due Oct 4", progress: "8 of 11 tasks" },
  { name: "Mobile onboarding", due: "Due Oct 18", progress: "3 of 9 tasks" },
  { name: "Billing migration", due: "Due Nov 2", progress: "1 of 14 tasks" },
];

export default function Resizable04() {
  const sidebarRef = React.useRef<PanelImperativeHandle | null>(null);
  const [collapsed, setCollapsed] = React.useState(false);
  const [activeLink, setActiveLink] = React.useState("Projects");

  function toggleSidebar() {
    const panel = sidebarRef.current;
    if (!panel) return;
    if (panel.isCollapsed()) panel.expand();
    else panel.collapse();
  }

  return (
    <div className="h-80 w-full max-w-2xl">
      <ResizablePanelGroup className="rounded-lg border bg-background">
        <ResizablePanel
          id="sidebar"
          panelRef={sidebarRef}
          collapsible
          collapsedSize="52px"
          defaultSize="30%"
          minSize="22%"
          maxSize="40%"
          onResize={() => {
            setCollapsed(sidebarRef.current?.isCollapsed() ?? false);
          }}
          className="bg-muted/40"
        >
          <nav
            id="resizable-04-sidebar"
            aria-label="Workspace"
            className="@container flex h-full flex-col gap-0.5 overflow-hidden p-2"
          >
            {links.map((link) => (
              <a
                key={link.label}
                href={`#${link.label.toLowerCase()}`}
                aria-current={link.label === activeLink ? "page" : undefined}
                onClick={(event) => {
                  event.preventDefault();
                  setActiveLink(link.label);
                }}
                aria-label={collapsed ? link.label : undefined}
                title={collapsed ? link.label : undefined}
                className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-sm text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-background aria-[current=page]:font-medium aria-[current=page]:text-foreground aria-[current=page]:shadow-xs"
              >
                <link.icon aria-hidden="true" className="size-4 shrink-0" />
                {!collapsed && (
                  <>
                    <span className="sr-only @[8rem]:not-sr-only @[8rem]:truncate">
                      {link.label}
                    </span>
                    {link.count ? (
                      <span className="ml-auto hidden text-xs tabular-nums @[8rem]:inline">
                        {link.count}
                      </span>
                    ) : null}
                  </>
                )}
              </a>
            ))}
          </nav>
        </ResizablePanel>
        <ResizableHandle withHandle aria-label="Resize sidebar" />
        <ResizablePanel id="main" defaultSize="70%" minSize="50%">
          <div className="flex h-full flex-col overflow-hidden">
            <header className="flex items-center gap-2 border-b px-3 py-2">
              <Button
                variant="ghost"
                size="icon-sm"
                aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
                aria-controls="resizable-04-sidebar"
                aria-expanded={!collapsed}
                onClick={toggleSidebar}
              >
                {collapsed ? (
                  <PanelLeftOpen aria-hidden="true" />
                ) : (
                  <PanelLeftClose aria-hidden="true" />
                )}
              </Button>
              <h3 className="text-sm font-medium">Projects</h3>
            </header>
            <ul className="flex flex-col divide-y">
              {projects.map((project) => (
                <li
                  key={project.name}
                  className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5 px-4 py-3"
                >
                  <span className="truncate text-sm font-medium">
                    {project.name}
                  </span>
                  <span className="text-xs text-muted-foreground tabular-nums">
                    {project.progress} · {project.due}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { Columns2, Eye, PenLine } from "lucide-react";
import type { GroupImperativeHandle } from "react-resizable-panels";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

const presets = [
  { value: "write", label: "Write", icon: PenLine, layout: { source: 75, preview: 25 } },
  { value: "split", label: "Split", icon: Columns2, layout: { source: 50, preview: 50 } },
  { value: "read", label: "Read", icon: Eye, layout: { source: 25, preview: 75 } },
];

const source = [
  "## Release 4.2",
  "",
  "- Faster search on large",
  "  workspaces",
  "- Export boards as CSV",
  "- Fixed a sync issue on",
  "  shared calendars",
];

export default function Resizable05() {
  const groupRef = React.useRef<GroupImperativeHandle | null>(null);
  const [preset, setPreset] = React.useState("split");
  const [animating, setAnimating] = React.useState(false);

  React.useEffect(() => {
    if (!animating) return;
    const timeout = window.setTimeout(() => setAnimating(false), 320);
    return () => window.clearTimeout(timeout);
  }, [animating]);

  function applyPreset(value: string) {
    const next = presets.find((item) => item.value === value);
    if (!next) return;
    setPreset(value);
    setAnimating(true);
    groupRef.current?.setLayout(next.layout);
  }

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <span id="resizable-05-label" className="text-sm font-medium">
          Release notes
        </span>
        <ToggleGroup
          aria-labelledby="resizable-05-label"
          variant="outline"
          size="sm"
          spacing={0}
          value={preset ? [preset] : []}
          onValueChange={(next) => {
            if (next.length > 0) applyPreset(next[0]);
          }}
        >
          {presets.map((item) => (
            <ToggleGroupItem
              key={item.value}
              value={item.value}
              aria-label={`${item.label} layout`}
            >
              <item.icon aria-hidden="true" />
              <span className="max-sm:sr-only">{item.label}</span>
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>
      <div className="h-64 w-full">
        <ResizablePanelGroup
          groupRef={groupRef}
          data-animating={animating || undefined}
          className="rounded-lg border bg-background motion-safe:[&[data-animating]>[data-panel]]:transition-[flex-grow] motion-safe:[&[data-animating]>[data-panel]]:duration-300 motion-safe:[&[data-animating]>[data-panel]]:ease-out"
          onLayoutChanged={(_layout, meta) => {
            // A manual drag or key press leaves every preset behind.
            if (meta.isUserInteraction) setPreset("");
          }}
        >
          <ResizablePanel id="source" defaultSize="50%" minSize="20%">
            <div className="flex h-full flex-col overflow-hidden bg-muted/40">
              <span className="border-b px-3 py-2 text-xs text-muted-foreground">
                release-4-2.md
              </span>
              <pre className="overflow-hidden p-3 font-mono text-xs leading-5 whitespace-pre text-foreground">
                {source.join("\n")}
              </pre>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle aria-label="Resize source and preview" />
          <ResizablePanel id="preview" defaultSize="50%" minSize="20%">
            <div className="flex h-full flex-col overflow-hidden">
              <span className="border-b px-3 py-2 text-xs text-muted-foreground">
                Preview
              </span>
              <div className="flex flex-col gap-2 p-4">
                <h3 className="text-base font-semibold">Release 4.2</h3>
                <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-muted-foreground">
                  <li>Faster search on large workspaces</li>
                  <li>Export boards as CSV</li>
                  <li>Fixed a sync issue on shared calendars</li>
                </ul>
              </div>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { Lock, LockOpen } from "lucide-react";

import { Label } from "@/components/ui/label";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { Switch } from "@/components/ui/switch";

const notes = [
  "Open with the churn number before the chart.",
  "Q3 retention rose to 94% after the onboarding changes.",
  "Pause for questions after the pricing slide.",
];

export default function Resizable06() {
  const [locked, setLocked] = React.useState(true);

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <div className="flex items-center justify-between gap-4">
        <div className="flex flex-col gap-0.5">
          <Label htmlFor="resizable-06-lock">Lock pane sizes</Label>
          <span className="text-xs text-muted-foreground">
            Stops accidental resizing while you present.
          </span>
        </div>
        <Switch
          id="resizable-06-lock"
          checked={locked}
          onCheckedChange={setLocked}
        />
      </div>
      <div className="h-64 w-full">
        <ResizablePanelGroup
          disabled={locked}
          className="rounded-lg border bg-background"
        >
          <ResizablePanel id="slide" defaultSize="62%" minSize="40%">
            <div className="flex h-full flex-col gap-3 overflow-hidden p-4">
              <span className="text-xs text-muted-foreground tabular-nums">
                Slide 7 of 18
              </span>
              <div className="flex flex-1 flex-col justify-end gap-1 rounded-md bg-muted p-4">
                <span className="text-xs text-muted-foreground">
                  Quarterly review
                </span>
                <span className="text-lg font-semibold tracking-tight">
                  Retention is up four points
                </span>
              </div>
            </div>
          </ResizablePanel>
          <ResizableHandle
            withHandle
            disabled={locked}
            aria-label="Resize slide and speaker notes"
            className="data-[separator=disabled]:bg-border/50 data-[separator=disabled]:*:hidden"
          />
          <ResizablePanel id="notes" defaultSize="38%" minSize="25%">
            <div className="flex h-full flex-col gap-2 overflow-hidden p-4">
              <div className="flex flex-wrap items-center justify-between gap-x-2 gap-y-1">
                <h3 className="text-sm font-medium">Speaker notes</h3>
                <span
                  className="inline-flex items-center gap-1 text-xs text-muted-foreground"
                  aria-live="polite"
                >
                  {locked ? (
                    <Lock aria-hidden="true" className="size-3.5" />
                  ) : (
                    <LockOpen aria-hidden="true" className="size-3.5" />
                  )}
                  {locked ? "Locked" : "Resizable"}
                </span>
              </div>
              <ul className="flex flex-col gap-2 text-sm text-muted-foreground">
                {notes.map((note) => (
                  <li key={note} className="leading-snug">
                    {note}
                  </li>
                ))}
              </ul>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { Check, ChevronsLeftRight } from "lucide-react";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const features = ["Unlimited projects", "Version history", "Priority support"];

export default function Resizable07() {
  const frameRef = React.useRef<HTMLDivElement>(null);
  const [width, setWidth] = React.useState(0);
  const [split, setSplit] = React.useState(50);

  React.useEffect(() => {
    const frame = frameRef.current;
    if (!frame) return;
    setWidth(frame.offsetWidth);
    if (typeof ResizeObserver === "undefined") return;
    const observer = new ResizeObserver(([entry]) => {
      setWidth(entry.contentRect.width);
    });
    observer.observe(frame);
    return () => observer.disconnect();
  }, []);

  // Both versions render at the full frame width so each panel clips the same
  // composition instead of reflowing it.
  const canvasStyle = width ? { width } : undefined;

  return (
    <figure className="flex w-full max-w-md flex-col gap-2">
      <div
        ref={frameRef}
        className="group/compare relative h-72 w-full overflow-hidden rounded-xl border bg-background"
      >
        <ResizablePanelGroup
          onLayoutChange={(layout) => setSplit(layout.before ?? 50)}
        >
          <ResizablePanel id="before" defaultSize="50%" minSize="0%">
            <div className="relative h-full overflow-hidden">
              <div
                aria-hidden="true"
                className="absolute inset-y-0 left-0 w-full"
                style={canvasStyle}
              >
                <BeforeCard />
              </div>
              <span className="absolute top-3 left-3 rounded-md bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
                Before
              </span>
            </div>
          </ResizablePanel>
          <ResizableHandle
            aria-label="Compare the current and proposed pricing card"
            className="w-0.5 bg-primary after:w-10"
          />
          <ResizablePanel id="after" defaultSize="50%" minSize="0%">
            <div className="relative h-full overflow-hidden">
              <div
                aria-hidden="true"
                className="absolute inset-y-0 right-0 w-full"
                style={canvasStyle}
              >
                <AfterCard />
              </div>
              <span className="absolute top-3 right-3 rounded-md bg-primary px-1.5 py-0.5 text-xs font-medium text-primary-foreground">
                After
              </span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
        <span
          aria-hidden="true"
          className="pointer-events-none absolute top-1/2 z-20 flex size-9 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border bg-background text-foreground shadow-md transition-[scale,box-shadow] group-has-data-[separator=active]/compare:scale-110 group-has-data-[separator=focus]/compare:ring-2 group-has-data-[separator=focus]/compare:ring-ring"
          // Clamp so the knob stays whole at either edge of the frame.
          style={{
            left: `clamp(1.125rem, ${split}%, calc(100% - 1.125rem))`,
          }}
        >
          <ChevronsLeftRight className="size-4" />
        </span>
      </div>
      <figcaption className="text-xs text-muted-foreground">
        Drag the divider, or focus it and use the arrow keys, to compare the
        current pricing card with the proposed one.
      </figcaption>
    </figure>
  );
}

function BeforeCard() {
  return (
    <div className="flex h-full flex-col items-center justify-center gap-2 bg-muted/40 p-6 text-center">
      <span className="text-sm text-muted-foreground">Pro plan</span>
      <span className="text-sm text-muted-foreground">
        $24 per month, billed yearly
      </span>
      <span className="text-xs text-muted-foreground">
        Unlimited projects, version history, priority support
      </span>
      <span className="mt-2 rounded-md border px-3 py-1.5 text-xs text-muted-foreground">
        Learn more
      </span>
    </div>
  );
}

function AfterCard() {
  return (
    <div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
      <div className="flex flex-col items-center gap-1">
        <span className="text-sm font-medium">Pro plan</span>
        <span className="flex items-baseline gap-1">
          <span className="text-3xl font-semibold tracking-tight tabular-nums">
            $24
          </span>
          <span className="text-sm text-muted-foreground">/ month</span>
        </span>
      </div>
      <ul className="flex flex-col gap-1.5 text-left text-sm">
        {features.map((feature) => (
          <li key={feature} className="flex items-center gap-2">
            <Check className="size-4 text-primary" />
            {feature}
          </li>
        ))}
      </ul>
      <span className="inline-flex h-8 w-fit items-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground">
        Start 14-day trial
      </span>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { RotateCcw } from "lucide-react";
import type { GroupImperativeHandle } from "react-resizable-panels";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const defaults = {
  columns: { left: 58, right: 42 },
  left: { hero: 64, detail: 36 },
  right: { palette: 45, texture: 55 },
};

type Tile = { id: string; caption: string; alt: string };

const tiles: Record<string, Tile> = {
  hero: {
    id: "hero",
    caption: "Hero · coastline at dusk",
    alt: "Wide shot of a rocky coastline at dusk",
  },
  detail: {
    id: "detail",
    caption: "Detail · knit texture",
    alt: "Close-up of a wool knit sweater",
  },
  palette: {
    id: "palette",
    caption: "Palette",
    alt: "",
  },
  texture: {
    id: "texture",
    caption: "Product · ceramic mug",
    alt: "Hand-thrown ceramic mug on a linen cloth",
  },
};

const swatches = [
  { role: "Lead", className: "bg-chart-1" },
  { role: "Accent", className: "bg-chart-2" },
  { role: "Support", className: "bg-chart-3" },
  { role: "Neutral", className: "bg-chart-4" },
];

export default function Resizable08() {
  const columnsRef = React.useRef<GroupImperativeHandle | null>(null);
  const leftRef = React.useRef<GroupImperativeHandle | null>(null);
  const rightRef = React.useRef<GroupImperativeHandle | null>(null);
  const [columns, setColumns] = React.useState<Record<string, number>>(
    defaults.columns,
  );
  const [left, setLeft] = React.useState<Record<string, number>>(defaults.left);
  const [right, setRight] = React.useState<Record<string, number>>(
    defaults.right,
  );

  const isDefault =
    Math.round(columns.left) === defaults.columns.left &&
    Math.round(left.hero) === defaults.left.hero &&
    Math.round(right.palette) === defaults.right.palette;

  function resetLayout() {
    columnsRef.current?.setLayout(defaults.columns);
    leftRef.current?.setLayout(defaults.left);
    rightRef.current?.setLayout(defaults.right);
  }

  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle>Autumn campaign moodboard</CardTitle>
        <CardDescription>
          Resize tiles to weigh each reference before the shoot.
        </CardDescription>
        <CardAction>
          <Button
            variant="outline"
            size="sm"
            disabled={isDefault}
            onClick={resetLayout}
          >
            <RotateCcw aria-hidden="true" data-icon="inline-start" />
            Reset
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <div className="h-80 w-full">
          <ResizablePanelGroup
            groupRef={columnsRef}
            onLayoutChange={setColumns}
            className="overflow-hidden rounded-lg border"
          >
            <ResizablePanel id="left" defaultSize="58%" minSize="30%">
              <ResizablePanelGroup
                orientation="vertical"
                groupRef={leftRef}
                onLayoutChange={setLeft}
              >
                <ResizablePanel id="hero" defaultSize="64%" minSize="25%">
                  <PhotoTile tile={tiles.hero} />
                </ResizablePanel>
                <ResizableHandle aria-label="Resize hero and detail images" />
                <ResizablePanel id="detail" defaultSize="36%" minSize="20%">
                  <PhotoTile tile={tiles.detail} />
                </ResizablePanel>
              </ResizablePanelGroup>
            </ResizablePanel>
            <ResizableHandle withHandle aria-label="Resize moodboard columns" />
            <ResizablePanel id="right" defaultSize="42%" minSize="25%">
              <ResizablePanelGroup
                orientation="vertical"
                groupRef={rightRef}
                onLayoutChange={setRight}
              >
                <ResizablePanel id="palette" defaultSize="45%" minSize="20%">
                  <div className="flex h-full flex-col gap-2 overflow-hidden p-3">
                    <span className="text-xs font-medium">
                      {tiles.palette.caption}
                    </span>
                    <ul
                      aria-label="Campaign colors"
                      className="grid flex-1 grid-cols-4 gap-1.5"
                    >
                      {swatches.map((swatch) => (
                        <li
                          key={swatch.role}
                          className={`min-h-4 rounded-md ${swatch.className}`}
                        >
                          <span className="sr-only">{swatch.role} color</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </ResizablePanel>
                <ResizableHandle aria-label="Resize palette and product image" />
                <ResizablePanel id="texture" defaultSize="55%" minSize="20%">
                  <PhotoTile tile={tiles.texture} />
                </ResizablePanel>
              </ResizablePanelGroup>
            </ResizablePanel>
          </ResizablePanelGroup>
        </div>
      </CardContent>
      <CardFooter className="flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground">
        <span className="font-mono tabular-nums">
          {Math.round(columns.left)} / {Math.round(columns.right)} ·{" "}
          {Math.round(left.hero)} / {Math.round(left.detail)} ·{" "}
          {Math.round(right.palette)} / {Math.round(right.texture)}
        </span>
        <span className="flex flex-wrap items-center gap-x-1.5 gap-y-1">
          Focus a divider, then
          <KbdGroup>
            <Kbd>←</Kbd>
            <Kbd>→</Kbd>
          </KbdGroup>
          or double-click to reset it
        </span>
      </CardFooter>
    </Card>
  );
}

function PhotoTile({ tile }: { tile: Tile }) {
  return (
    <figure className="relative h-full overflow-hidden bg-muted">
      <img
        src="/placeholder.svg"
        alt={tile.alt}
        className="size-full object-cover"
      />
      <figcaption className="absolute bottom-2 left-2 max-w-[calc(100%-1rem)] truncate rounded-md bg-background/90 px-1.5 py-0.5 text-xs font-medium">
        {tile.caption}
      </figcaption>
    </figure>
  );
}

TSX
"use client";

import * as React from "react";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const lineItems = [
  { id: "design", description: "Brand identity refresh", quantity: 1, rate: 3200 },
  { id: "pages", description: "Marketing page templates", quantity: 4, rate: 450 },
  { id: "support", description: "Launch week support hours", quantity: 6, rate: 120 },
];

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

export default function Resizable09() {
  const [client, setClient] = React.useState("Northwind Studio");
  const [taxRate, setTaxRate] = React.useState("8.25");
  const [previewWidth, setPreviewWidth] = React.useState<number | null>(null);

  const subtotal = lineItems.reduce(
    (sum, item) => sum + item.quantity * item.rate,
    0,
  );
  const tax = subtotal * ((Number.parseFloat(taxRate) || 0) / 100);
  const compact = previewWidth !== null && previewWidth < 280;

  return (
    <div className="h-[400px] w-full max-w-3xl">
      <ResizablePanelGroup className="rounded-xl border bg-background">
        <ResizablePanel defaultSize="42%" minSize="32%">
          <form
            aria-label="Invoice details"
            onSubmit={(event) => event.preventDefault()}
            className="flex h-full flex-col gap-4 overflow-y-auto p-4"
          >
            <h3 className="text-sm font-semibold">Invoice INV-2041</h3>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="resizable-09-client">Bill to</Label>
              <Input
                id="resizable-09-client"
                value={client}
                onChange={(event) => setClient(event.target.value)}
              />
            </div>
            <div className="flex flex-col gap-1.5">
              <Label htmlFor="resizable-09-tax">Sales tax (%)</Label>
              <Input
                id="resizable-09-tax"
                inputMode="decimal"
                value={taxRate}
                onChange={(event) => setTaxRate(event.target.value)}
              />
            </div>
            <p className="mt-auto text-xs leading-relaxed text-muted-foreground">
              Drag the divider to check how the invoice reads in a narrow
              email client.
            </p>
          </form>
        </ResizablePanel>
        <ResizableHandle withHandle aria-label="Resize invoice preview" />
        <ResizablePanel
          defaultSize="58%"
          minSize="35%"
          onResize={(size) => setPreviewWidth(Math.round(size.inPixels))}
        >
          <section
            aria-label="Invoice preview"
            className="flex h-full flex-col bg-muted/50"
          >
            <div className="flex h-9 items-center justify-between gap-2 border-b px-3 text-xs text-muted-foreground">
              <span className="truncate">Preview</span>
              <span className="shrink-0 whitespace-nowrap tabular-nums">
                {previewWidth === null
                  ? ""
                  : `${previewWidth}px · ${compact ? "Compact" : "Full"}`}
              </span>
            </div>
            <div className="flex-1 overflow-y-auto p-3">
              <div className="flex flex-col gap-4 rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
                <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
                  <span className="text-sm font-semibold">Fieldnote Design</span>
                  <span className="text-xs text-muted-foreground">
                    Due Oct 15, 2026
                  </span>
                </div>
                <div className="text-xs text-muted-foreground">
                  Billed to{" "}
                  <span className="font-medium text-foreground">
                    {client || "—"}
                  </span>
                </div>
                <ul className="flex flex-col divide-y text-sm">
                  {lineItems.map((item) => (
                    <li
                      key={item.id}
                      className={
                        compact
                          ? "flex flex-col gap-0.5 py-2"
                          : "flex items-baseline justify-between gap-3 py-2"
                      }
                    >
                      <span className="min-w-0">
                        {item.description}
                        <span className="block text-xs text-muted-foreground tabular-nums">
                          {item.quantity} × {currency.format(item.rate)}
                        </span>
                      </span>
                      <span className="font-medium tabular-nums">
                        {currency.format(item.quantity * item.rate)}
                      </span>
                    </li>
                  ))}
                </ul>
                <dl className="flex flex-col gap-1 border-t pt-3 text-sm tabular-nums">
                  <div className="flex justify-between text-muted-foreground">
                    <dt>Tax</dt>
                    <dd>{currency.format(tax)}</dd>
                  </div>
                  <div className="flex justify-between font-semibold">
                    <dt>Total due</dt>
                    <dd>{currency.format(subtotal + tax)}</dd>
                  </div>
                </dl>
              </div>
            </div>
          </section>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

TSX
"use client";

import { ChevronDown, ChevronUp, MessageSquare } from "lucide-react";
import * as React from "react";
import { usePanelRef } from "react-resizable-panels";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const clauses = [
  {
    id: "term",
    title: "4. Term and renewal",
    body: "This agreement starts on the effective date and renews for successive one-year terms unless either party gives written notice at least 60 days before the end of the current term.",
  },
  {
    id: "fees",
    title: "5. Fees and payment",
    body: "Customer pays the annual subscription fee in advance. Invoices are due within 30 days, and late balances accrue interest at 1% per month.",
  },
  {
    id: "liability",
    title: "9. Limitation of liability",
    body: "Neither party is liable for indirect or consequential damages. Each party's total liability is capped at the fees paid in the twelve months before the claim.",
  },
];

const initialComments = [
  {
    id: "c1",
    author: "Dana Brooks",
    initials: "DB",
    clause: "4. Term and renewal",
    text: "Can we shorten the notice window to 30 days? Procurement flagged 60 as too long.",
  },
  {
    id: "c2",
    author: "Luis Ortega",
    initials: "LO",
    clause: "5. Fees and payment",
    text: "Legal wants net 45 instead of net 30 for enterprise accounts.",
  },
  {
    id: "c3",
    author: "Dana Brooks",
    initials: "DB",
    clause: "9. Limitation of liability",
    text: "Cap looks fine. Confirm it excludes data breach claims.",
  },
];

export default function Resizable10() {
  const dockRef = usePanelRef();
  const [collapsed, setCollapsed] = React.useState(false);
  const [comments, setComments] = React.useState(initialComments);

  function toggleDock() {
    const panel = dockRef.current;
    if (!panel) return;
    if (panel.isCollapsed()) panel.expand();
    else panel.collapse();
  }

  function resolve(id: string) {
    setComments((current) => current.filter((comment) => comment.id !== id));
  }

  return (
    <div className="h-[420px] w-full max-w-xl">
      <ResizablePanelGroup
        orientation="vertical"
        className="rounded-xl border bg-card text-card-foreground"
      >
        <ResizablePanel id="document" defaultSize="58%" minSize="30%">
          <article
            aria-labelledby="resizable-10-title"
            className="flex h-full flex-col gap-3 overflow-y-auto p-5"
          >
            <h3 id="resizable-10-title" className="text-sm font-semibold">
              Master services agreement, Northwind Studio
            </h3>
            {clauses.map((clause) => (
              <section key={clause.id} className="flex flex-col gap-1">
                <h4 className="text-sm font-medium">{clause.title}</h4>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  {clause.body}
                </p>
              </section>
            ))}
          </article>
        </ResizablePanel>
        <ResizableHandle aria-label="Resize comments dock" />
        <ResizablePanel
          id="comments"
          panelRef={dockRef}
          defaultSize="42%"
          minSize="28%"
          maxSize="60%"
          collapsible
          collapsedSize="40px"
          onResize={() => setCollapsed(dockRef.current?.isCollapsed() ?? false)}
        >
          <section
            aria-labelledby="resizable-10-comments"
            className="flex h-full flex-col bg-muted/40"
          >
            <div className="flex h-10 shrink-0 items-center gap-2 pr-1.5 pl-3">
              <MessageSquare
                aria-hidden="true"
                className="size-4 text-muted-foreground"
              />
              <h4
                id="resizable-10-comments"
                className="text-sm font-medium"
              >
                Comments
              </h4>
              <span
                aria-live="polite"
                className="text-xs text-muted-foreground tabular-nums"
              >
                {comments.length} open
              </span>
              <Button
                variant="ghost"
                size="icon-sm"
                className="ml-auto"
                aria-label={collapsed ? "Expand comments" : "Collapse comments"}
                aria-controls="resizable-10-thread"
                aria-expanded={!collapsed}
                onClick={toggleDock}
              >
                {collapsed ? (
                  <ChevronUp aria-hidden="true" />
                ) : (
                  <ChevronDown aria-hidden="true" />
                )}
              </Button>
            </div>
            <div
              id="resizable-10-thread"
              inert={collapsed}
              className="min-h-0 flex-1 overflow-y-auto border-t"
            >
              {comments.length === 0 ? (
                <p className="p-4 text-center text-sm text-muted-foreground">
                  All comments resolved. The draft is ready for signature.
                </p>
              ) : (
                <ul className="flex flex-col divide-y">
                  {comments.map((comment) => (
                    <li key={comment.id} className="flex gap-3 px-3 py-2.5">
                      <Avatar className="size-7">
                        <AvatarFallback className="text-[11px]">
                          {comment.initials}
                        </AvatarFallback>
                      </Avatar>
                      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                        <div className="flex flex-wrap items-baseline gap-x-2">
                          <span className="text-sm font-medium">
                            {comment.author}
                          </span>
                          <span className="truncate text-xs text-muted-foreground">
                            on {comment.clause}
                          </span>
                        </div>
                        <p className="text-sm leading-snug">{comment.text}</p>
                      </div>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="shrink-0 self-start"
                        aria-label={`Resolve comment from ${comment.author}`}
                        onClick={() => resolve(comment.id)}
                      >
                        Resolve
                      </Button>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </section>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

TSX
"use client";

import { CalendarCheck, Clock, Video } from "lucide-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const days = [
  { id: "mon", label: "Mon", date: "Oct 6" },
  { id: "tue", label: "Tue", date: "Oct 7" },
  { id: "wed", label: "Wed", date: "Oct 8" },
];

const slotsByDay: Record<string, string[]> = {
  mon: ["9:00 AM", "9:30 AM", "11:00 AM", "1:30 PM", "3:00 PM", "4:30 PM"],
  tue: ["10:00 AM", "10:30 AM", "2:00 PM", "2:30 PM"],
  wed: ["9:00 AM", "12:00 PM", "12:30 PM", "1:00 PM", "3:30 PM"],
};

export default function Resizable11() {
  const [dayId, setDayId] = React.useState(days[0].id);
  const [slot, setSlot] = React.useState<string | null>(null);
  const [booked, setBooked] = React.useState(false);
  const day = days.find((item) => item.id === dayId) ?? days[0];

  return (
    <div className="h-[380px] w-full max-w-2xl">
      <ResizablePanelGroup className="rounded-xl border bg-card text-card-foreground">
        <ResizablePanel defaultSize="58%" minSize="40%">
          <section
            aria-labelledby="resizable-11-slots"
            className="@container flex h-full flex-col gap-3 overflow-y-auto p-4"
          >
            <h3 id="resizable-11-slots" className="text-sm font-semibold">
              Pick a time
            </h3>
            <fieldset
              aria-label="Day"
              className="grid grid-cols-3 gap-1.5"
            >
              {days.map((item) => (
                <button
                  key={item.id}
                  type="button"
                  aria-pressed={item.id === dayId}
                  onClick={() => {
                    setDayId(item.id);
                    setSlot(null);
                    setBooked(false);
                  }}
                  className="flex flex-col items-center rounded-lg border px-1 py-1.5 text-xs outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground"
                >
                  <span className="font-medium">{item.label}</span>
                  <span className="opacity-80">{item.date}</span>
                </button>
              ))}
            </fieldset>
            <fieldset
              aria-label={`Available times on ${day.label}, ${day.date}`}
              className="grid grid-cols-1 gap-1.5 @[16rem]:grid-cols-2 @[24rem]:grid-cols-3"
            >
              {slotsByDay[dayId].map((time) => (
                <button
                  key={time}
                  type="button"
                  aria-pressed={time === slot}
                  onClick={() => {
                    setSlot(time);
                    setBooked(false);
                  }}
                  className="h-8 rounded-md border text-sm tabular-nums outline-none transition-colors hover:border-primary/60 focus-visible:ring-2 focus-visible:ring-ring/50 aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:font-medium"
                >
                  {time}
                </button>
              ))}
            </fieldset>
          </section>
        </ResizablePanel>
        <ResizableHandle withHandle aria-label="Resize booking summary" />
        <ResizablePanel defaultSize="42%" minSize="30%">
          <aside
            aria-label="Booking summary"
            className="@container flex h-full flex-col gap-4 bg-muted/40 p-4"
          >
            <div className="flex flex-col gap-1">
              <h3 className="text-sm font-semibold">Onboarding call</h3>
              <p className="text-xs text-muted-foreground">
                with Jordan Lee, Customer Success
              </p>
            </div>
            <ul className="flex flex-col gap-2 text-sm text-muted-foreground">
              <li className="flex items-center gap-2">
                <Clock aria-hidden="true" className="size-4 shrink-0" />
                30 minutes
              </li>
              <li className="flex items-center gap-2">
                <Video aria-hidden="true" className="size-4 shrink-0" />
                Video link sent by email
              </li>
            </ul>
            <div className="mt-auto flex flex-col gap-2">
              <p className="text-sm" aria-live="polite">
                {booked ? (
                  <span className="flex items-center gap-1.5 font-medium text-success">
                    <CalendarCheck aria-hidden="true" className="size-4" />
                    Booked for {day.label} at {slot}
                  </span>
                ) : slot ? (
                  <span>
                    {day.label}, {day.date} at{" "}
                    <span className="font-medium">{slot}</span>
                  </span>
                ) : (
                  <span className="text-muted-foreground">No time selected</span>
                )}
              </p>
              <Button
                disabled={!slot || booked}
                onClick={() => setBooked(true)}
              >
                Confirm
                <span className="hidden @[10rem]:inline">booking</span>
              </Button>
            </div>
          </aside>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}

TSX
"use client";

import * as React from "react";

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const visits = [
  { day: "Mon", value: 3120 },
  { day: "Tue", value: 4480 },
  { day: "Wed", value: 4010 },
  { day: "Thu", value: 5290 },
  { day: "Fri", value: 4870 },
  { day: "Sat", value: 2240 },
  { day: "Sun", value: 1980 },
];

const pages = [
  { path: "/pricing", views: 8412, change: "+12%" },
  { path: "/docs/getting-started", views: 6205, change: "+4%" },
  { path: "/blog/usage-based-billing", views: 3981, change: "+31%" },
  { path: "/changelog", views: 2117, change: "-6%" },
  { path: "/careers", views: 1302, change: "+2%" },
];

const total = visits.reduce((sum, item) => sum + item.value, 0);
const peak = Math.max(...visits.map((item) => item.value));
const number = new Intl.NumberFormat("en-US");

export default function Resizable12() {
  const [chartHeight, setChartHeight] = React.useState<number | null>(null);
  const compact = chartHeight !== null && chartHeight < 130;

  return (
    <div className="h-[420px] w-full max-w-lg">
      <ResizablePanelGroup
        orientation="vertical"
        className="rounded-xl border bg-card text-card-foreground"
      >
        <ResizablePanel
          defaultSize="55%"
          minSize="22%"
          maxSize="75%"
          onResize={(size) => setChartHeight(size.inPixels)}
        >
          <section
            aria-labelledby="resizable-12-title"
            className="flex h-full flex-col gap-3 p-4"
          >
            <div className="flex items-baseline justify-between gap-3">
              <h3 id="resizable-12-title" className="text-sm font-semibold">
                Visitors this week
              </h3>
              <span className="text-lg font-semibold tabular-nums">
                {number.format(total)}
              </span>
            </div>
            {compact ? (
              <p className="text-xs text-muted-foreground">
                Peak on Thursday with {number.format(peak)} visitors. Drag the
                divider down to see the daily breakdown.
              </p>
            ) : (
              <ul
                aria-label="Daily visitors"
                className="flex min-h-0 flex-1 items-end gap-1.5"
              >
                {visits.map((item) => (
                  <li
                    key={item.day}
                    className="flex h-full flex-1 flex-col items-center justify-end gap-1"
                  >
                    <span className="sr-only">
                      {item.day}: {number.format(item.value)} visitors
                    </span>
                    <span
                      aria-hidden="true"
                      className="w-full rounded-t-sm bg-chart-1 transition-[height] duration-200 ease-out"
                      style={{ height: `${(item.value / peak) * 100}%` }}
                    />
                    <span
                      aria-hidden="true"
                      className="text-[11px] text-muted-foreground"
                    >
                      {item.day}
                    </span>
                  </li>
                ))}
              </ul>
            )}
          </section>
        </ResizablePanel>
        <ResizableHandle withHandle aria-label="Resize chart and table" />
        <ResizablePanel defaultSize="45%" minSize="25%">
          <div className="h-full overflow-y-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-full pl-4">Top page</TableHead>
                  <TableHead className="text-right">Views</TableHead>
                  <TableHead className="pr-4 text-right">Change</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {pages.map((page) => (
                  <TableRow key={page.path}>
                    <TableCell className="max-w-0 truncate pl-4 font-mono text-xs">
                      {page.path}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {number.format(page.views)}
                    </TableCell>
                    <TableCell
                      className={
                        page.change.startsWith("-")
                          ? "pr-4 text-right text-destructive tabular-nums"
                          : "pr-4 text-right text-success tabular-nums"
                      }
                    >
                      {page.change}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
}