sigit.io/src/components/PDFView/PdfMarkItem.tsx

import { Mark, MarkLocation } from '../../types/mark.ts'
import styles from '../DrawPDFFields/style.module.scss'
import { inPx } from '../../utils/pdf.ts'

interface PdfMarkItemProps {
  mark: Mark
  handleMarkClick: (id: number) => void
  isEditable: boolean
}

const PdfMarkItem = ({ mark, handleMarkClick, isEditable }: PdfMarkItemProps) => {
  const handleClick = () => isEditable && handleMarkClick(mark.id);
  return (
    <div
      onClick={handleClick}
      className={`${styles.drawingRectangle} ${isEditable ? '' : styles.nonEditable}`}
      style={{
        left: inPx(mark.location.left),
        top: inPx(mark.location.top),
        width: inPx(mark.location.width),
        height: inPx(mark.location.height)
      }}
     />
  )
}

export default PdfMarkItem