76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
'use client'
|
|
import { Box, Button, Flex, Image, Modal, rem } from '@mantine/core';
|
|
import dynamic from 'next/dynamic';
|
|
import React, { useState } from 'react';
|
|
const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
|
|
|
|
export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) {
|
|
const [isValModal, setValModal] = useState(opened)
|
|
const [zoom, setZoom] = useState(1)
|
|
const filePdf = '/file/' + fitur + '/' + file
|
|
|
|
const handleZoomIn = () => {
|
|
setZoom(zoom + 0.1)
|
|
}
|
|
|
|
const handleZoomOut = () => {
|
|
setZoom(zoom - 0.1)
|
|
}
|
|
|
|
return (
|
|
<Modal styles={{
|
|
body: {
|
|
margin: 10,
|
|
},
|
|
content: {
|
|
maxWidth: 550,
|
|
}
|
|
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
|
|
<Box
|
|
pos="sticky"
|
|
top={70}
|
|
right={10}
|
|
w={50}
|
|
|
|
style={{
|
|
background: 'white',
|
|
zIndex: 999,
|
|
}}
|
|
>
|
|
<Flex
|
|
direction="column"
|
|
>
|
|
<Button mb={5} variant="outline" onClick={handleZoomIn}>
|
|
+
|
|
</Button>
|
|
<Button variant="outline" onClick={handleZoomOut}>
|
|
-
|
|
</Button>
|
|
</Flex>
|
|
</Box>
|
|
<Box pos={"relative"} style={{
|
|
transform: `scale(${zoom})`,
|
|
transformOrigin: 'center',
|
|
maxWidth: rem(550),
|
|
}}>
|
|
<div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
|
|
{
|
|
extension === 'pdf' ? <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} /> :
|
|
<Image
|
|
radius="md"
|
|
style={{
|
|
maxWidth: '100%',
|
|
maxHeight: '100%',
|
|
}}
|
|
fit="contain"
|
|
src={`https://wibu-storage.wibudev.com/api/files/${file}`}
|
|
alt={file}
|
|
/>
|
|
}
|
|
</div>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|
|
|