Inspector

import { useRef, useState } from "react";
import { Button, HStack, Inspector, Picker, Text, TextField, VStack } from "@/ohmygui";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [width, setWidth] = useState("24rem");
  const trigger = useRef<HTMLButtonElement>(null);
  const [message, setMessage] = useState("");

  return (
    <VStack gap="md" align="start">
      <HStack gap="sm" wrap>
        <Button ref={trigger} onClick={() => setOpen(true)}>Document details</Button>
        <Picker label="Inspector width" value={width} onChange={(event) => setWidth(event.currentTarget.value)} items={[{ value: "20rem", label: "Narrow" }, { value: "24rem", label: "Default" }, { value: "32rem", label: "Wide" }]} />
      </HStack>
      {message && <Text as="p" role="status">{message}</Text>}
      <Inspector
        triggerRef={trigger}
        open={open}
        onClose={() => setOpen(false)}
        title="Field guide"
        description="Document details"
        width={width}
        actions={<Button onClick={() => { setMessage("Details updated."); setOpen(false); }}>Apply</Button>}
      >
        <TextField label="Title" defaultValue="A field guide to native plants" autoFocus />
        <TextField label="Author" defaultValue="Sam Rivera" />
      </Inspector>
    </VStack>
  );
}