Function PlantDialog

packages/dev/docs/pages/react-aria/home/ExampleApp.tsx:622–746

({item, onSave}: {item?: Plant | null; onSave: (item: Plant) => void})

}

function PlantDialog({item, onSave}: {item?: Plant | null; onSave: (item: Plant) => void}) {
  let [droppedImage, setDroppedImage] = useState(item?.default_image?.thumbnail);
  return (
    <Dialog className="outline outline-0 relative">
      {({close}) => (
        <>
          <Heading
            slot="title"
            className="text-2xl font-semibold leading-6 my-0 text-neutral-700 dark:text-neutral-300">
            {item ? 'Edit Plant' : 'Add Plant'}
          </Heading>
          <Form
            onSubmit={e => {
              e.preventDefault();
              close();
              let data = Object.fromEntries(new FormData(e.currentTarget)) as any;
              data.sunlight = [data.sunlight];
              data.scientific_name = [data.scientific_name];
              data.default_image = {thumbnail: data.image};
              data.id = item?.id || Date.now();
              data.isFavorite = item?.isFavorite || false;
              onSave(data);
            }}
            className="mt-6 flex flex-col gap-3">
            <div className="flex gap-4">
              <DropZone
                getDropOperation={types =>
                  types.has('image/jpeg') || types.has('image/png') ? 'copy' : 'cancel'
                }
                onDrop={async e => {
                  let item = e.items
                    .filter(isFileDropItem)
                    .find(item => item.type === 'image/jpeg' || item.type === 'image/png');
                  if (item) {
                    setDroppedImage(URL.createObjectURL(await item.getFile()));
                  }
                }}
                className="w-24 sm:w-32 p-2 box-border flex items-center justify-center shrink-0 border-2 border-neutral-400 border-dashed rounded-xl text-neutral-500 dark:text-neutral-300 focus-visible:border-blue-600 forced-colors:focus-visible:border-[Highlight] focus-visible:border-solid drop-target:border-blue-600 forced-colors:drop-target:border-[Highlight] drop-target:border-solid drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:text-blue-600 dark:drop-target:text-blue-300">
                {droppedImage ? (
                  <img
                    alt=""
                    src={droppedImage}
                    className="w-full h-full object-contain aspect-square"
                  />
                ) : (
                  <Text slot="label" className="italic text-sm text-center">
                    Drop or paste image here
                  </Text>
                )}
                <input type="hidden" name="image" value={droppedImage} />
              </DropZone>
              <div className="flex flex-col gap-3 flex-1 min-w-0">
                <ComboBox
                  label="Common Name"
                  placeholder="Enter plant name"
                  name="common_name"
                  isRequired
                  items={plants}