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 16:03:27 +08:00
parent 42d2734c43
commit 08d4504a5b
3 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/module/_global/components/notification_custome.tsx
View File

@@ -3,9 +3,12 @@ import { Box, Center, Flex, Grid, rem, Text, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IoCloseOutline, IoNotifications } from 'react-icons/io5'; import { IoCloseOutline, IoNotifications } from 'react-icons/io5';
import { TEMA } from '../bin/val_global';
import { useHookstate } from '@hookstate/core';
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 }) { export default function NotificationCustome({ onClose, title, desc, onClick }: { onClose: () => void, title: string, desc: string, onClick: () => void, }) {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const tema = useHookstate(TEMA)
useShallowEffect(() => { useShallowEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
@@ -49,23 +52,23 @@ export default function NotificationCustome({ onClose, title, desc, bg, color, o
<Box p={rem(15)} w={"100%"} h={rem(85)} style={{ <Box p={rem(15)} w={"100%"} h={rem(85)} style={{
maxWidth: rem(450), maxWidth: rem(450),
zIndex: 999, zIndex: 999,
backgroundColor: bg, backgroundColor: "#ffffff",
borderRadius: 15, borderRadius: 15,
border: `1px solid ${borderColor}` border: `1px solid ${tema.get().bgTotalKegiatan}`
}} onClick={onClick}> }} onClick={onClick}>
<Grid> <Grid>
<Grid.Col span={2}> <Grid.Col span={2}>
<Flex justify={'center'} align={"center"}h={"100%"} > <Flex justify={'center'} align={"center"} h={"100%"} >
<IoNotifications color={color} size={30}/> <IoNotifications color={tema.get().utama} size={30} />
</Flex> </Flex>
</Grid.Col> </Grid.Col>
<Grid.Col span={8}> <Grid.Col span={8}>
<Text c={color} fw={"bold"} lineClamp={1}>{title}</Text> <Text fw={"bold"} lineClamp={1}>{title}</Text>
<Text c={color} lineClamp={1}>{desc}</Text> <Text lineClamp={1}>{desc}</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col span={2}>
<Flex justify={'center'} align={"center"}h={"100%"} > <Flex justify={'center'} align={"center"} h={"100%"} >
<IoCloseOutline onClick={reloadData} color={color} size={25}/> <IoCloseOutline onClick={reloadData} size={25} />
</Flex> </Flex>
</Grid.Col> </Grid.Col>
</Grid> </Grid>

7
src/module/_global/components/reload_button_top.tsx
View File

@@ -1,11 +1,14 @@
"use client" "use client"
import { useHookstate } from '@hookstate/core';
import { Button, Center, Transition } from '@mantine/core'; import { Button, Center, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks'; import { useShallowEffect } from '@mantine/hooks';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { IoReload } from 'react-icons/io5'; import { IoReload } from 'react-icons/io5';
import { TEMA } from '../bin/val_global';
export default function ReloadButtonTop({ onReload, title }: { onReload: () => void, title: string }) { export default function ReloadButtonTop({ onReload, title }: { onReload: () => void, title: string }) {
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const tema = useHookstate(TEMA)
useShallowEffect(() => { useShallowEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
@@ -40,7 +43,9 @@ export default function ReloadButtonTop({ onReload, title }: { onReload: () => v
alignItems: 'center', alignItems: 'center',
}} }}
> >
<Button leftSection={<IoReload/>} onClick={reloadData} radius={"lg"}>{title}</Button> <Button style={{
border: `1px solid ${tema.get().bgTotalKegiatan}`
}} leftSection={<IoReload/>} bg={"white"} c={tema.get().utama} onClick={reloadData} radius={"lg"}>{title}</Button>
</div> </div>
)} )}
</Transition> </Transition>

11
src/module/home/ui/view_home.tsx
View File

@@ -25,23 +25,20 @@ export default function ViewHome() {
<IconNavbar /> <IconNavbar />
</Group> </Group>
</LayoutNavbarHome> </LayoutNavbarHome>
{/* <ReloadButtonTop <ReloadButtonTop
onReload={ onReload={
() => { () => {
'' ''
} }
} }
title='UPDATE' title='UPDATE'
/> */} />
<NotificationCustome {/* <NotificationCustome
color='#FFFFFFFF'
bg='#0A2295FF'
borderColor={"#7CBBEFFF"}
title='Pengumuman' title='Pengumuman'
desc='Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera' desc='Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera'
onClick={() => {''}} onClick={() => {''}}
onClose={() => {''}} onClose={() => {''}}
/> /> */}
<Box p={20}> <Box p={20}>
<Stack > <Stack >
<Carosole /> <Carosole />