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

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-26 17:07:52 +08:00
parent 18f9ad9c80
commit 00866a2362
1 changed files with 56 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/module/calender/ui/history_division_calender.tsx
View File

@@ -37,7 +37,7 @@ export default function HistoryDivisionCalender() {
getData() getData()
}, [searchQuery]) }, [searchQuery])
const isMobile = useMediaQuery('(max-width: 450px)'); const isMobile = useMediaQuery('(max-width: 450px)');
return ( return (
<Box> <Box>
@@ -59,83 +59,69 @@ export default function HistoryDivisionCalender() {
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
<Box mt={30}> <Box mt={30}>
<Box bg={tema.get().bgTotalKegiatan} style={{ <Box>
borderRadius: 10,
padding: 20
}} h={"100vh"}>
{loading ? {loading ?
Array(6) Array(6)
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i} mb={10}> <Box key={i} mb={20}>
<Grid > <Skeleton height={100} width={"100%"} radius={10} />
<Grid.Col span={2}>
<Flex justify={"center"} direction={'column'}>
<Skeleton height={30} width={"100%"} radius={"md"} />
<Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
</Flex>
</Grid.Col>
<Grid.Col span={'auto'}>
{[...Array(1)].map((_, x) => (
<Box mb={10} key={x}>
<Skeleton height={20} width={"100%"} radius={"md"} />
<Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
</Box>
))}
</Grid.Col>
</Grid>
</Box> </Box>
)) ))
: :
_.isEmpty(isData) _.isEmpty(isData)
? ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Acara</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Acara</Text>
</Box> </Box>
: :
isData.map((v, i) => { isData.map((v, i) => {
return ( return (
<Grid key={i} <Box bg={tema.get().bgTotalKegiatan} style={{
style={{ borderRadius: 10,
alignContent: 'flex-start', }} mb={20} p={20} key={i}>
alignItems: 'flex-start', <Grid
}} style={{
> alignContent: 'flex-start',
<Grid.Col span={{ alignItems: 'flex-start',
base: isMobile ? 4 : 3, }}
sm: 3, >
xs:3, <Grid.Col span={{
md: 3, base: isMobile ? 4 : 3,
lg: 3, sm: 3,
xl: 3 xs: 3,
}}> md: 3,
<Flex justify={"center"} direction={'column'}> lg: 3,
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text> xl: 3
<Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text> }}>
</Flex> <Flex justify={"center"} direction={'column'}>
</Grid.Col> <Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
<Grid.Col span={{ <Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
base: isMobile ? 8 : 9, </Flex>
md: 9, </Grid.Col>
lg: 9, <Grid.Col span={{
xl: 9, base: isMobile ? 8 : 9,
sm: 9, md: 9,
xs:9 lg: 9,
}}> xl: 9,
{v.data.map((d, x) => { sm: 9,
return ( xs: 9
<Box mb={9} key={x} }}>
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)} {v.data.map((d, x) => {
> return (
<Text fw={"bold"} lineClamp={1}>{d.title}</Text> <Box mb={9} key={x}
<Text>{d.timeStart} | {d.timeEnd}</Text> onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
</Box> >
) <Text fw={"bold"} lineClamp={1}>{d.title}</Text>
})} <Text>{d.timeStart} | {d.timeEnd}</Text>
</Grid.Col> </Box>
</Grid> )
) })}
}) </Grid.Col>
</Grid>
</Box>
)
})
} }
</Box> </Box>
</Box> </Box>