Popover

import { Popover } from '@base-ui/react/popover';
import { Switch } from '@base-ui/react/switch';

export function SharePopover() {
  return (
    <Popover.Root>
      <Popover.Trigger className='rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted data-popup-open:bg-muted'>
        Share
      </Popover.Trigger>
      <Popover.Portal>
        {/* Base UI flips the popup above the button when there's no room below. */}
        <Popover.Positioner sideOffset={8}>
          {/* --transform-origin points at the arrow, so it grows out of the button. */}
          <Popover.Popup className='relative w-65 origin-(--transform-origin) rounded-xl border bg-background p-4 shadow-lg outline-none transition-[opacity,scale] duration-150 ease-out data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0'>
            <Popover.Arrow className='size-3 rotate-45 bg-background data-[side=bottom]:-top-1.5 data-[side=bottom]:border-t data-[side=bottom]:border-l data-[side=top]:-bottom-1.5 data-[side=top]:border-r data-[side=top]:border-b' />
            <Popover.Title className='text-sm font-semibold'>
              Share “Q3 roadmap”
            </Popover.Title>
            <form
              className='mt-3 flex gap-2'
              onSubmit={(event) => event.preventDefault()}
            >
              <input
                type='email'
                required
                aria-label='Email'
                placeholder='name@company.com'
                className='h-9 min-w-0 flex-1 rounded-md border bg-background px-3 text-sm outline-none focus:ring-2 focus:ring-ring'
              />
              <button className='h-9 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground'>
                Invite
              </button>
            </form>
            <label className='mt-4 flex items-center justify-between text-sm'>
              Anyone with the link
              <Switch.Root className='flex h-5 w-9 rounded-full bg-muted p-0.5 transition-colors data-checked:bg-blue-600'>
                <Switch.Thumb className='size-4 rounded-full bg-white shadow-sm transition-transform data-checked:translate-x-4' />
              </Switch.Root>
            </label>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}