Dock

"use client";

import { useState } from "react";
import { Dock, type DockLayout, TextArea, Button } from "mizu-ui";

export function Example() {
  const initial: DockLayout = {
    panes: [["draft", "notes"], ["preview"]],
    active: ["draft", "preview"],
    split: 52,
    collapsed: null,
  };
  const [layout, setLayout] = useState(initial);
  return (
    <div style={{ display: "grid", gap: 16 }}>
      <Dock
        label="Release workspace"
        value={layout}
        onValueChange={setLayout}
        tabs={[
          {
            id: "draft",
            label: "Draft",
            content: (
              <TextArea
                label="Release draft"
                rows={7}
                defaultValue={
                  "A quieter way to work.\n\nEvery panel keeps its place, and every draft stays yours."
                }
                hint="Edit this, then move the tab. Your draft travels with it."
              />
            ),
          },
          {
            id: "notes",
            label: "Notes",
            content: (
              <section>
                <h3>Before publishing</h3>
                <ul className="mizu-field-hint">
                  <li>Check the keyboard path.</li>
                  <li>Read the empty and error states.</li>
                  <li>Keep the motion purposeful.</li>
                </ul>
              </section>
            ),
          },
          {
            id: "preview",
            label: "Preview",
            content: (
              <article>
                <h3>A quieter way to work.</h3>
                <p className="mizu-field-hint">
                  A focused workspace for the source, its context and the
                  result. Tabs keep their content mounted when you switch,
                  collapse or move them; on narrow screens the panes stack.
                </p>
              </article>
            ),
          },
        ]}
      />
      <Button
        variant="ghost"
        arrow={false}
        size="sm"
        style={{ justifySelf: "start" }}
        onClick={() => setLayout(initial)}
      >
        Reset layout
      </Button>
    </div>
  );
}

npx shadcn@latest add 0xuser64bit/mizu/dock 0xuser64bit/mizu/text-area 0xuser64bit/mizu/button

import { Dock, type DockLayout } from "@/components/ui/mizu/dock";
import { TextArea } from "@/components/ui/mizu/text-area";
import { Button } from "@/components/ui/mizu/button";