wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update style

Browse Source 
Deskripsi:
- update api division
- update layout
- update global
- update auth
- update division
- update home
- update task

No Issue
This commit is contained in:
lukman
2024-09-09 16:35:20 +08:00
parent f18f41292f
commit c6afef08fe
15 changed files with 354 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/_global/index.ts
View File

@@ -14,6 +14,7 @@ import LayoutLogin from "./layout/layout_login";
import LayoutModalViewFile from "./layout/layout_modal_view_file";
import LayoutNavbarHome from "./layout/layout_navbar_home";
import LayoutNavbarNew from "./layout/layout_navbar_new";
import NoZoom from "./layout/no_zoom";
import ViewFilter from "./view/view_filter";
export { WARNA };
@@ -34,3 +35,4 @@ export { SkeletonDetailListTugasTask }
export { LayoutModalViewFile }
export { globalRole }
export { WrapLayout }
export { NoZoom }

67
src/module/_global/layout/layout_modal_view_file.tsx
View File

@@ -1,12 +1,22 @@
'use client'
import { Image, Modal } from '@mantine/core';
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: {
@@ -16,20 +26,49 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
maxWidth: 550,
}
}} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
<Box
pos="sticky"
top={70}
right={10}
w={50}
{
extension === 'pdf' ? <PdfToImage md={filePdf} /> :
<Image
radius="md"
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain"
src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`}
alt={file}
/>
}
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={filePdf} /> :
<Image
radius="md"
style={{
maxWidth: '100%',
maxHeight: '100%',
}}
fit="contain"
src={`/api/file/img?cat=${fitur}&file=${file}&jenis=file`}
alt={file}
/>
}
</div>
</Box>
</Modal>
);
}

10
src/module/_global/layout/no_zoom.tsx Normal file
View File

@@ -0,0 +1,10 @@
// components/NoZoom.js
import Head from 'next/head';
export default function NoZoom() {
return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</Head>
);
}