React Ariaを使用したモーダル作成

$ npm install react-aria-components

$ yarn add react-aria-components

import {
  Button,
  Calendar,
  CalendarCell,
  CalendarGrid,
  DateInput,
  DatePicker,
  DateSegment,
  Dialog,
  DialogTrigger,
  Group,
  Heading,
  Input,
  Label,
  ListBox,
  ListBoxItem,
  Modal,
  Popover,
  Select,
  SelectValue,
  TextField,
} from "react-aria-components"

export default function BlogPage() {
  return (
    <div className="mt-10 flex justify-center">
      <DialogTrigger>
        <Button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700">
          モーダルを開く
        </Button>
        <Modal className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <Dialog className="w-[600px] rounded-lg border border-gray-400 bg-white p-6 shadow-lg outline-none">
            {({ close }) => (
              <form>
                <Heading
                  slot="title"
                  className="mb-4 border-b-2 text-lg font-semibold"
                >
                  モーダル
                </Heading>
                <div className="flex flex-col gap-6">
                  <TextField autoFocus>
                    <Label className="mb-1 block">タイトル</Label>
                    <Input className="w-full rounded border border-gray-300 p-2" />
                  </TextField>
                  <TextField autoFocus>
                    <Label className="mb-1 block">内容</Label>
                    <Input className="w-full rounded border border-gray-300 p-2" />
                  </TextField>
                  <Select className="flex flex-col">
                    <Label>選択肢</Label>
                    <Button className="flex w-fit gap-3 rounded-md border px-4 py-2">
                      <SelectValue />
                      <span
                        aria-hidden="true"
                        className="rounded-md border px-1"
                      >
                        ▼
                      </span>
                    </Button>
                    <Popover>
                      <ListBox className="flex flex-col gap-2 bg-gray-100 p-4">
                        <ListBoxItem>リンゴ</ListBoxItem>
                        <ListBoxItem>バナナ</ListBoxItem>
                        <ListBoxItem>パイナップル</ListBoxItem>
                        <ListBoxItem>ブドウ</ListBoxItem>
                      </ListBox>
                    </Popover>
                  </Select>
                  <DatePicker>
                    <Label>日付</Label>
                    <Group className="flex w-fit gap-3 rounded-md border px-4 py-2">
                      <DateInput className="flex gap-1">
                        {(segment) => <DateSegment segment={segment} />}
                      </DateInput>
                      <Button className="rounded-md border px-1">▼</Button>
                    </Group>
                    <Popover>
                      <Dialog>
                        <Calendar className="bg-gray-100 p-4">
                          <header className="flex w-[200px] justify-between gap-6">
                            <Button slot="previous">◀</Button>
                            <Heading />
                            <Button slot="next">▶</Button>
                          </header>
                          <CalendarGrid className="w-[200px]">
                            {(date) => <CalendarCell date={date} />}
                          </CalendarGrid>
                        </Calendar>
                      </Dialog>
                    </Popover>
                  </DatePicker>
                  <Button
                    onPress={close}
                    className="w-fit rounded-md border bg-blue-500 px-6 py-3 text-white hover:bg-blue-700"
                  >
                    送信
                  </Button>
                </div>
              </form>
            )}
          </Dialog>
        </Modal>
      </DialogTrigger>
    </div>
  )
}