インスペクターInspectorPanelExperimental

import {
  Button,
  HStack,
  Input,
  InspectorField,
  InspectorPanel,
  InspectorSection,
  Switch,
} from "@gunjo/ui";

export function ShapeInspector() {
  return (
    <InspectorPanel
      title="長方形 1"
      className="h-[420px] w-[320px] rounded-lg border shadow-sm"
      footer={
        <HStack justify="between" className="w-full">
          <Button variant="ghost" size="sm">リセット</Button>
          <Button size="sm">適用</Button>
        </HStack>
      }
    >
      <InspectorSection title="レイアウト">
        <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2">
          <InspectorField label="X"><Input defaultValue="24" className="h-8 w-full min-w-0" /></InspectorField>
          <InspectorField label="Y"><Input defaultValue="48" className="h-8 w-full min-w-0" /></InspectorField>
          <InspectorField label="W"><Input defaultValue="240" className="h-8 w-full min-w-0" /></InspectorField>
          <InspectorField label="H"><Input defaultValue="160" className="h-8 w-full min-w-0" /></InspectorField>
        </div>
      </InspectorSection>
      <InspectorSection title="外観">
        <InspectorField label="塗り"><Input defaultValue="Primary" className="h-8 w-full min-w-0" /></InspectorField>
        <HStack justify="between">
          <span className="text-xs text-foreground">表示</span>
          <Switch defaultChecked />
        </HStack>
      </InspectorSection>
    </InspectorPanel>
  );
}