Popover

const PreviewEn = () => {
  return (
    <Popover.TriggerContext>
      <Popover.Trigger>Open popover</Popover.Trigger>
      <Popover placement='top'>
        The popover provides a quick message. You can use it to show the user
        information that is relevant to the context.
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<PreviewEn />)

const PreviewEn = () => {
  return (
    <Popover.TriggerContext>
      <Popover.Trigger>Open popover</Popover.Trigger>
      <Popover placement='top'>
        The popover provides a quick message. You can use it to show the user
        information that is relevant to the context.
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<PreviewEn />)

const DottedUnderlineEn = () => {
  return (
    <Popover.TriggerContext>
      <Paragraph>
        We use <Popover.Trigger inline>design tokens</Popover.Trigger> to ensure
        a consistent design.
      </Paragraph>
      <Popover data-color='neutral'>
        <Paragraph>
          <strong
            style={{
              display: 'block',
            }}
          >
            Design tokens
          </strong>
          Design tokens are a collection of variables that define the visual
          style within a design system.
        </Paragraph>
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<DottedUnderlineEn />)

const ControlledEn = () => {
  const [open, setOpen] = useState(false);

  return (
    <Popover.TriggerContext>
      <Popover.Trigger onClick={() => setOpen(!open)}>Delete</Popover.Trigger>
      <Popover open={open} onClose={() => setOpen(false)} data-color='danger'>
        <Paragraph>Are you sure you want to delete this?</Paragraph>
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-2)',
            marginTop: 'var(--ds-size-2)',
          }}
        >
          <Button
            onClick={() => setOpen(false)}
            data-size='sm'
            data-color='danger'
          >
            Delete
          </Button>
          <Button
            data-variant='tertiary'
            onClick={() => setOpen(false)}
            data-size='sm'
          >
            Cancel
          </Button>
        </div>
      </Popover>
    </Popover.TriggerContext>
  );
};

render(<ControlledEn />)

const WithoutContextEn = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        data-color='danger'
        popovertarget='my-popover'
        onClick={() => setOpen(!open)}
      >
        Delete
      </Button>

      <Popover
        id='my-popover'
        open={open}
        onClose={() => setOpen(false)}
        data-color='danger'
      >
        <Paragraph>Are you sure you want to delete?</Paragraph>
        <Button
          onClick={() => setOpen(false)}
          data-size='sm'
          style={{ marginTop: 'var(--ds-size-2)' }}
        >
          Delete
        </Button>
      </Popover>
    </>
  );
};

render(<WithoutContextEn />)