Compass/web/components/photos-modal.tsx

import {getProfileOgImageUrl} from 'common/profiles/og-image'
import {Profile} from 'common/profiles/profile'
import {User} from 'common/user'
import Image from 'next/image'
import {useEffect, useState} from 'react'
import {Button} from 'web/components/buttons/button'
import {Col} from 'web/components/layout/col'
import {Modal, MODAL_CLASS} from 'web/components/layout/modal'
import {Row} from 'web/components/layout/row'
import {ShareProfileButtons} from 'web/components/widgets/share-profile-button'
import {useT} from 'web/lib/locale'

export const PhotosModal = (props: {
  open: boolean
  setOpen: (open: boolean) => void
  photos: string[]
}) => {
  const {open, setOpen, photos} = props
  const [index, setIndex] = useState(0)
  useEffect(() => {
    if (!open) setTimeout(() => setIndex(0), 100)
  }, [open])
  return (
    <Modal open={open} size={'xl'} setOpen={setOpen}>
      <Col className={MODAL_CLASS}>
        <Image
          src={photos[index]}
          width={500}
          height={700}
          alt={`preview ${index}`}
          className="h-full w-full rounded-sm object-cover"
        />
        <Row className={'gap-2'}>
          <Button onClick={() => setIndex(index - 1)} disabled={index === 0}>
            Previous
          </Button>
          <Button onClick={() => setIndex(index + 1)} disabled={index === photos.length - 1}>
            Next
          </Button>
        </Row>
      </Col>
    </Modal>
  )
}

export const ExpandablePhoto = (props: {src: string; width?: number; height?: number}) => {
  const {src, width = 1000, height = 1000} = props
  const [open, setOpen] = useState<boolean>(false)
  return (
    <div className="">
      <Image
        src={src}
        width={width}
        height={height}
        alt=""
        className="cursor-pointer object-cover rounded-2xl"
        onClick={() => setOpen(true)}
      />
      <Modal open={open} setOpen={setOpen} size={'xl'}>
        <Image src={src} width={1000} height={1000} alt="" className={'rounded-2xl'} />
      </Modal>
    </div>
  )
}

export const ViewProfileCardButton = (props: {
  user: User
  profile: Profile
  width?: number
  height?: number
}) => {
  const {user, profile, width = 1000, height = 300} = props
  const [open, setOpen] = useState<boolean>(false)
  const t = useT()
  if (!user || !profile) return
  const src = getProfileOgImageUrl(user, profile)
  const username = user.username
  return (
    <>
      <Button onClick={() => setOpen(true)}>
        {t('share_profile.view_profile_card', 'View Profile Card')}
      </Button>
      <Modal open={open} setOpen={setOpen} size={'lg'} className={''}>
        <Col className="gap-4 bg-canvas-100/75 rounded-2xl">
          <Image
            src={src}
            width={width}
            height={height}
            alt={t('profile_card.loading', 'Loading your card, it may take a few seconds...')}
            className={'rounded-2xl'}
          />
          <ShareProfileButtons
            username={username}
            className={'justify-center gap-4 text-3xl pb-4'}
            buttonClassName={'hover:bg-canvas-200'}
          />
        </Col>
      </Modal>
    </>
  )
}