48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import styles from '../DrawPDFFields/style.module.scss'
|
|
import { PdfPage } from '../../types/drawing.ts'
|
|
import { Mark, MarkConfigDetails } from '../../types/mark.ts'
|
|
import PdfMarkItem from './PdfMarkItem.tsx'
|
|
import { useSelector } from 'react-redux'
|
|
import { State } from '../../store/rootReducer.ts'
|
|
import { hexToNpub } from '../../utils'
|
|
interface PdfPageProps {
|
|
page: PdfPage
|
|
marks: Mark[]
|
|
handleMarkClick: (id: number) => void
|
|
}
|
|
|
|
const PdfPageItem = ({ page, marks, handleMarkClick }: PdfPageProps) => {
|
|
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
|
const isEditable = (mark: Mark): boolean => {
|
|
if (!usersPubkey) return false;
|
|
return mark.npub === hexToNpub(usersPubkey);
|
|
}
|
|
return (
|
|
<div
|
|
className={styles.pdfImageWrapper}
|
|
style={{
|
|
border: '1px solid #c4c4c4',
|
|
marginBottom: '10px',
|
|
marginTop: '10px'
|
|
}}
|
|
>
|
|
<img
|
|
draggable="false"
|
|
src={page.image}
|
|
style={{ width: '100%'}}
|
|
|
|
/>
|
|
{
|
|
marks.map((mark, i) => (
|
|
<PdfMarkItem
|
|
key={i}
|
|
mark={mark}
|
|
isEditable={isEditable(mark)}
|
|
handleMarkClick={handleMarkClick}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PdfPageItem |