Dialog

import { useT } from '@iffday/i18n';
import { Button, Dialog, DialogClose, Field, Form, Input } from '@iffday/ui';
import { useApp } from '@iffday/web/src/state';
import { useState } from 'react';

export default function Example() {
  const t = useT();
  const { notify } = useApp();
  const [open, setOpen] = useState(false);
  return (
    <Dialog
      open={open}
      onOpenChange={setOpen}
      title={t('film.entry.logAViewing')}
      description={t('film.entry.selfReportedViewingNoTicketIsRequiredLeaveThe')}
      trigger={
        <Button type="button" className="button primary">
          {t('film.entry.markAsWatched')}
        </Button>
      }
    >
      <Form
        onSubmit={(event) => {
          event.preventDefault();
          setOpen(false);
          notify(t('film.entry.markedAsWatched'));
        }}
      >
        <Field label={t('film.entry.viewingDateOptional')}>
          <Input type="date" />
        </Field>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <DialogClose className="button neutral">{t('common.cancel')}</DialogClose>
          <Button className="button primary">{t('common.save')}</Button>
        </div>
      </Form>
    </Dialog>
  );
}