sigit.io/src/components/DisplaySigit/index.tsx

import { Meta } from '../../types'
import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
import { Link } from 'react-router-dom'
import { formatTimestamp, npubToHex } from '../../utils'
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
import { Button, Divider, Tooltip } from '@mui/material'
import { DisplaySigner } from '../DisplaySigner'
import {
  faArchive,
  faCalendar,
  faCopy,
  faEye,
  faFile,
  faFileCircleExclamation
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { UserAvatarGroup } from '../UserAvatarGroup'

import styles from './style.module.scss'
import { getExtensionIconLabel } from '../getExtensionIconLabel'
import { useSigitMeta } from '../../hooks/useSigitMeta'
import { extractFileExtensions } from '../../utils/file'

type SigitProps = {
  sigitCreateId: string
  meta: Meta
  parsedMeta: SigitCardDisplayInfo
}

export const DisplaySigit = ({
  meta,
  parsedMeta,
  sigitCreateId: sigitCreateId
}: SigitProps) => {
  const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
    parsedMeta

  const { signersStatus, fileHashes } = useSigitMeta(meta)
  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))

  return (
    <div className={styles.itemWrapper}>
      {signedStatus === SigitStatus.Complete && (
        <Link
          to={appPublicRoutes.verify}
          state={{ meta }}
          className={styles.insetLink}
        ></Link>
      )}
      {signedStatus !== SigitStatus.Complete && (
        <Link
          to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
          className={styles.insetLink}
        ></Link>
      )}
      <p className={`line-clamp-2 ${styles.title}`}>{title}</p>
      <div className={styles.users}>
        {submittedBy && (
          <DisplaySigner
            status={isValid ? SignStatus.Signed : SignStatus.Invalid}
            pubkey={submittedBy}
          />
        )}
        {submittedBy && signers.length ? (
          <Divider orientation="vertical" flexItem />
        ) : null}
        <UserAvatarGroup max={7}>
          {signers.map((signer) => {
            const pubkey = npubToHex(signer)!
            return (
              <DisplaySigner
                key={pubkey}
                status={signersStatus[signer]}
                pubkey={pubkey}
              />
            )
          })}
        </UserAvatarGroup>
      </div>
      <div className={`${styles.details} ${styles.iconLabel}`}>
        <FontAwesomeIcon icon={faCalendar} />
        {createdAt ? formatTimestamp(createdAt) : null}
      </div>
      <div className={`${styles.details} ${styles.status}`}>
        <span className={styles.iconLabel}>
          <FontAwesomeIcon icon={faEye} /> {signedStatus}
        </span>
        {extensions.length > 0 ? (
          <span className={styles.iconLabel}>
            {!isSame ? (
              <>
                <FontAwesomeIcon icon={faFile} /> Multiple File Types
              </>
            ) : (
              getExtensionIconLabel(extensions[0])
            )}
          </span>
        ) : (
          <>
            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
          </>
        )}
      </div>
      <div className={styles.itemActions}>
        <Tooltip title="Duplicate" arrow placement="top" disableInteractive>
          <Button
            sx={{
              color: 'var(--primary-main)',
              minWidth: '34px',
              padding: '10px'
            }}
            variant={'text'}
          >
            <FontAwesomeIcon icon={faCopy} />
          </Button>
        </Tooltip>
        <Tooltip title="Archive" arrow placement="top" disableInteractive>
          <Button
            sx={{
              color: 'var(--primary-main)',
              minWidth: '34px',
              padding: '10px'
            }}
            variant={'text'}
          >
            <FontAwesomeIcon icon={faArchive} />
          </Button>
        </Tooltip>
      </div>
    </div>
  )
}