React Resizable Layout

import {
  ResizableLayoutContent,
  ResizableLayoutGroup,
  ResizableLayoutPanel,
  ResizableLayoutProvider,
  ResizableLayoutTrigger,
} from "@/components/resizable-layout";
import { getServerSideResizableLayoutCookieData } from "@/components/resizable-layout/server-utils";

/**
 * Unique panel IDs are used to control the state of individual panels.
 * These IDs must be consistent between the trigger and the panel components.
 */
const LEFT_PANEL_ID = "left-panel";
const RIGHT_PANEL_ID = "right-panel";

/**
 * This is an example of a server-side rendered resizable layout.
 * It fetches cookie data on the server to restore the user's layout preferences.
 */
export default async function Usage() {
  // 1. Read layout cookies on the server.
  //    - `states`: Stores the collapsed/expanded state of each panel.
  //    - `sizes`: Stores the width/height of each panel.
  //    We provide default values to ensure a consistent initial layout
  //    if no cookie is found or if the cookie data is invalid.
  const { states: defaultState, sizes: defaultLayout } =
    await getServerSideResizableLayoutCookieData({
      states: {
        [LEFT_PANEL_ID]: true, // Left panel is initially open
        [RIGHT_PANEL_ID]: false, // Right panel is initially closed
      },
      // The `sizes` array corresponds to the panels in order:
      // [left, content, right]
      sizes: [25, 75, 0],
    });

  return (
    // 2. The provider manages the state of all resizable panels.
    //    `initialState` is used to set the initial open/closed state of panels.
    <ResizableLayoutProvider initialState={defaultState}>
      <ResizableLayoutGroup
        direction="horizontal"
        // 3. `defaultLayout` passes the saved (or default) sizes to the panels.
        //    This prevents layout shifts on page load (FOUC).
        defaultLayout={defaultLayout}>
        {/* Left Panel */}
        <ResizableLayoutPanel
          id={LEFT_PANEL_ID}
          side="left"
          className="group hidden bg-sidebar md:block"
          minSize={20}
          // `defaultSize` is a fallback if no cookie/defaultLayout is provided.
          defaultSize={25}
          maxSize={30}>
          <div className="p-4">
            <h2 className="font-semibold">Left Panel</h2>
            <p className="text-sm">This is the left panel content.</p>
          </div>
        </ResizableLayoutPanel>

        {/* Main Content */}
        <ResizableLayoutContent minSize={40} defaultSize={75} maxSize={100}>
          <div className="p-4 flex flex-col items-center gap-4">
            <h1 className="text-xl font-bold">Main Content</h1>
            <p>Use the triggers to toggle the side panels.</p>
            <div className="flex gap-2">
              <ResizableLayoutTrigger id={LEFT_PANEL_ID} />
              <ResizableLayoutTrigger id={RIGHT_PANEL_ID} />
            </div>
          </div>
        </ResizableLayoutContent>

        {/* Right Panel */}
        <ResizableLayoutPanel
          id={RIGHT_PANEL_ID}
          side="right"
          className="group hidden bg-sidebar md:block"
          minSize={20}
          defaultSize={25} // This size is applied when the panel is expanded.
          maxSize={30}>
          <div className="p-4">
            <h2 className="font-semibold">Right Panel</h2>
            <p className="text-sm">This is the right panel content.</p>
          </div>
        </ResizableLayoutPanel>
      </ResizableLayoutGroup>
    </ResizableLayoutProvider>
  );
}

// Example: Start with the left panel open and the right one closed
<ResizableLayoutProvider initialState={{ "left-panel": true, "right-panel": false }}>
  {/* ... */}
</ResizableLayoutProvider>

// Corresponds to [left, content, right] panels
<ResizableLayoutGroup direction="horizontal" defaultLayout={[25, 50, 25]}>
  <ResizableLayoutPanel id="left-panel" />
  <ResizableLayoutContent />
  <ResizableLayoutPanel id="right-panel" />
</ResizableLayoutGroup>

<ResizableLayoutOpen id="left-panel" asChild>
  <button>Open Left Panel</button>
</ResizableLayoutOpen>

// In a Next.js Server Component (e.g., page.tsx)
import { getServerSideResizableLayoutCookieData } from "@/components/resizable-layout/server-utils";

export default async function Page() {
  const { states, sizes } = await getServerSideResizableLayoutCookieData({
    states: { "left-panel": true },
    sizes: [25, 75],
  });

  return (
    <ResizableLayoutProvider initialState={states}>
      <ResizableLayoutGroup defaultLayout={sizes}>
        {/* ... */}
      </ResizableLayoutGroup>
    </ResizableLayoutProvider>
  );
}