Resizable

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Resizable
} from "@pimolu/react";

const splitFrame = {
  border: "1px solid var(--pimolu-border)",
  borderRadius: "var(--pimolu-radius-lg)",
  overflow: "hidden",
  background: "var(--pimolu-background)",
} as const;

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Inspector</CardTitle>
          <CardDescription>A canvas and a properties panel.</CardDescription>
        </CardHeader>
        <CardContent>
          <Resizable
            aria-label="Canvas and properties"
            defaultSizes={[64, 36]}
            minSize={25}
            paneClassName="min-w-0 rounded-lg border border-border p-6"
            style={{
              ...splitFrame,
              height: 220
            }}
          >
            <div
              style={{
                display: "grid",
                placeItems: "center",
                height: "100%",
                minHeight: 120,
                background: "var(--pimolu-muted)",
                borderRadius: "var(--pimolu-radius-md)",
              }}
            >
              <span className="text-sm text-muted leading-relaxed">Canvas</span>
            </div>
            <div className="grid gap-5 min-w-0">
              <span className="text-sm text-muted leading-relaxed">PROPERTIES</span>
              <span>Radius · md</span>
              <span>Density · comfortable</span>
              <span>Theme · light</span>
            </div>
          </Resizable>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Diff view</CardTitle>
          <CardDescription>Before and after, with a vertical split.</CardDescription>
        </CardHeader>
        <CardContent>
          <Resizable
            aria-label="Before and after"
            orientation="vertical"
            defaultSizes={[
              50,
              50
            ]}
            paneClassName="min-w-0 rounded-lg border border-border p-6"
            style={{
              ...splitFrame,
              height: 220
            }}
          >
            <pre
              style={{
                margin: 0,
                fontSize: 12,
                color: "var(--pimolu-muted-foreground)",
              }}
            >
              {`- border-radius: 8px;\n- box-shadow: none;`}
            </pre>
            <pre
              style={{
                margin: 0,
                fontSize: 12,
                color: "var(--pimolu-success)",
              }}
            >
              {
                `+ border-radius: var(--pimolu-radius-lg);\n+ box-shadow: var(--pimolu-shadow-md);`
              }
            </pre>
          </Resizable>
        </CardContent>
      </Card>
    </div>
  );
}