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

style : update style and components

Browse Source 
Deskripsi:
- update global
- update division
- update home
- update project
- update user
- add component natification
- add component reload

No Issue
This commit is contained in:
lukman
2024-09-18 15:39:21 +08:00
parent 048b2632a9
commit 42d2734c43
14 changed files with 268 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/module/_global/components/notification_custome.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client"
import { Box, Center, Flex, Grid, rem, Text, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { IoCloseOutline, IoNotifications } from 'react-icons/io5';
export default function NotificationCustome({ onClose, title, desc, bg, color, onClick, borderColor }: { onClose: () => void, title: string, desc: string, bg: string, color: string, onClick: () => void, borderColor: string }) {
const [opened, setOpened] = useState(false);
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(false)
}, 6000);
return () => clearTimeout(timer);
}, []);
function reloadData() {
onClose()
}
return (
<>
<Center>
<Transition
mounted={opened}
transition="fade-down"
duration={400}
timingFunction="ease"
>
{(state) => (
<div
style={{
...state,
zIndex: 999,
position: 'fixed',
top: 50,
display: 'flex',
margin: 20,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box p={rem(15)} w={"100%"} h={rem(85)} style={{
maxWidth: rem(450),
zIndex: 999,
backgroundColor: bg,
borderRadius: 15,
border: `1px solid ${borderColor}`
}} onClick={onClick}>
<Grid>
<Grid.Col span={2}>
<Flex justify={'center'} align={"center"}h={"100%"} >
<IoNotifications color={color} size={30}/>
</Flex>
</Grid.Col>
<Grid.Col span={8}>
<Text c={color} fw={"bold"} lineClamp={1}>{title}</Text>
<Text c={color} lineClamp={1}>{desc}</Text>
</Grid.Col>
<Grid.Col span={2}>
<Flex justify={'center'} align={"center"}h={"100%"} >
<IoCloseOutline onClick={reloadData} color={color} size={25}/>
</Flex>
</Grid.Col>
</Grid>
</Box>
</div>
)}
</Transition>
</Center>
</>
);
}

50
src/module/_global/components/reload_button_top.tsx Normal file
View File

@@ -0,0 +1,50 @@
"use client"
import { Button, Center, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react';
import { IoReload } from 'react-icons/io5';
export default function ReloadButtonTop({ onReload, title }: { onReload: () => void, title: string }) {
const [opened, setOpened] = useState(false);
useShallowEffect(() => {
const timer = setTimeout(() => {
setOpened(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
function reloadData() {
onReload()
setOpened(false)
}
return (
<>
<Center>
<Transition
mounted={opened}
transition="fade-down"
duration={400}
timingFunction="ease"
>
{(state) => (
<div
style={{
...state,
zIndex: 999,
position: 'absolute',
top: 90,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Button leftSection={<IoReload/>} onClick={reloadData} radius={"lg"}>{title}</Button>
</div>
)}
</Transition>
</Center>
</>
);
}

29
src/module/_global/components/skeleton_avatar.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { Avatar } from '@mantine/core';
import React from 'react';
import bgIcon from "../../../../public/assets/img/avatar.png"
interface AvatarType {
img: string
size: string
sizeNoImg: string
}
export default function SkeletonAvatar({ img, size, sizeNoImg }: AvatarType) {
return (
<>
{img == "" ?
<Avatar
size={sizeNoImg}
radius={"100"}
src={String(bgIcon)}
/>
:
<Avatar
size={size}
radius={"100"}
src={img}
/>
}
</>
);
}

100
src/module/_global/components/skeleton_detail_list_tugas_task.tsx
View File

@@ -6,58 +6,60 @@ import { TEMA } from '../bin/val_global';
export default function SkeletonDetailListTugasTask() {
const tema = useHookstate(TEMA)
return (
<Grid>
<Grid.Col span={"auto"}>
<Center>
<Skeleton width={30} height={30} radius={"md"} />
</Center>
</Grid.Col>
<Grid.Col span={10}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
}}
>
<Group>
<Skeleton width={25} height={25} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
<Box>
<Skeleton width={30} height={30} radius={"md"} />
<Grid>
<Grid.Col span={"auto"}>
<Center>
</Center>
</Grid.Col>
<Grid.Col span={12}>
<Box
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
padding: 10,
}}
>
<Group>
<Skeleton width={25} height={25} radius={"md"} />
<Skeleton width={"50%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
<Box>
<Skeleton width={"50%"} height={20} radius={"md"} />
<Group
bg={"white"}
mt={3}
h={45}
style={{
borderRadius: 10,
border: `1px solid ${tema.get().bgTotalKegiatan}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
</SimpleGrid>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
</Grid.Col>
</Grid>
</Box>
);
}