feat(create-page): new create page design #153
@ -21,7 +21,7 @@ import {
|
||||
DrawTool
|
||||
} from '../../types/drawing'
|
||||
import { truncate } from 'lodash'
|
||||
import { hexToNpub } from '../../utils'
|
||||
import { extractFileExtension, hexToNpub } from '../../utils'
|
||||
import { toPdfFiles } from '../../utils/pdf.ts'
|
||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
@ -478,15 +478,25 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
return (
|
||||
<div className={styles.view}>
|
||||
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
||||
{selectedFiles.map((file, i) => {
|
||||
const name = file.name
|
||||
const extension = extractFileExtension(name)
|
||||
const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
|
||||
return (
|
||||
<React.Fragment key={pdfFile.file.name}>
|
||||
<React.Fragment key={name}>
|
||||
<div
|
||||
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
|
||||
id={`file-${pdfFile.file.name}`}
|
||||
id={`file-${name}`}
|
||||
>
|
||||
{getPdfPages(pdfFile, pdfFileIndex)}
|
||||
{pdfFileIndex < pdfFiles.length - 1 && (
|
||||
{pdfFile ? (
|
||||
getPdfPages(pdfFile, i)
|
||||
) : (
|
||||
<div className={styles.otherFile}>
|
||||
This is a {extension} file
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{i < selectedFiles.length - 1 && (
|
||||
<Divider
|
||||
sx={{
|
||||
fontSize: '12px',
|
||||
@ -496,7 +506,6 @@ export const DrawPDFFields = (props: Props) => {
|
||||
File Separator
|
||||
</Divider>
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
|
@ -104,3 +104,15 @@
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.otherFile {
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
@ -190,3 +190,11 @@ export const extractFileExtensions = (fileNames: string[]) => {
|
||||
|
||||
return { extensions, isSame }
|
||||
}
|
||||
|
||||
/**
|
||||
* @param fileName - Filename to check
|
||||
* @returns Extension string
|
||||
*/
|
||||
export const extractFileExtension = (fileName: string) => {
|
||||
return fileName.split('.').pop()
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user