Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 7x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 7x 5x | import { useEffect, useState } from "react";
import { Box } from "@mui/material";
import { convertPdfFileToImagePreview } from "../utils";
import GiveText from "@shared/Text/GiveText";
const PdfPreview = ({ file }: { file: File }) => {
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
useEffect(() => {
let isMounted = true;
const generatePreview = async () => {
const url = await convertPdfFileToImagePreview(file);
if (isMounted) {
setPreviewUrl(url);
}
};
generatePreview();
return () => {
isMounted = false;
};
}, [file]);
Eif (!previewUrl) {
return (
<Box
data-testid="no-preview"
sx={{
width: 44,
height: 44,
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<GiveText fontSize="10px">Loading...</GiveText>
</Box>
);
}
return <InputFileImage previewUrl={previewUrl} file={file} />;
};
export default PdfPreview;
export const InputFileImage = ({
previewUrl,
file,
}: {
previewUrl: string;
file: File;
}) => {
return (
<Box
data-testid="image-preview"
component="img"
src={previewUrl}
alt={file.name}
sx={{
width: 44,
height: 44,
objectFit: "cover",
borderRadius: "4px",
}}
/>
);
};
|