omnivore/packages/web/components/templates/article/DisplaySettingsModal.tsx

import { VStack } from '../../elements/LayoutPrimitives'
import { ModalRoot, ModalContent } from '../../elements/ModalPrimitives'
import { ReaderSettingsControl } from './ReaderSettingsControl'

type DisplaySettingsModalProps = {
  centerX: boolean
  onOpenChange: (open: boolean) => void
  triggerElementRef?: React.RefObject<HTMLElement>
  articleActionHandler: (action: string, arg?: number | string) => void
}

export function DisplaySettingsModal(
  props: DisplaySettingsModalProps
): JSX.Element {
  const top =
    props.triggerElementRef?.current?.getBoundingClientRect().bottom ?? 0
  const left =
    props.triggerElementRef?.current?.getBoundingClientRect().left ?? 0

  return (
    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
      <ModalContent
        css={{
          width: '245px',
          top: props.triggerElementRef?.current ? top : '50%',
          left: props.triggerElementRef?.current
            ? left - (props.centerX ? 265 / 2 : 0)
            : '50%',
          transform: props.triggerElementRef?.current
            ? 'unset'
            : 'translate(-50%, -50%)',
        }}
        onPointerDownOutside={(event) => {
          event.preventDefault()
          props.onOpenChange(false)
        }}
      >
        <VStack css={{ width: '100%' }}>
          <ReaderSettingsControl
            articleActionHandler={props.articleActionHandler}
          />
        </VStack>
      </ModalContent>
    </ModalRoot>
  )
}