style: update skelaton

This commit is contained in:
lukman
2024-08-23 14:12:01 +08:00
parent 6fef9ae028
commit f1121afee6
16 changed files with 756 additions and 278 deletions

View File

@@ -0,0 +1,60 @@
import { Box, Center, Grid, Group, SimpleGrid, Skeleton } from '@mantine/core';
import React from 'react';
export default function SkeletonDetailListTugasTask() {
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 ${"#D6D8F6"}`,
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 ${"#D6D8F6"}`,
}}
>
<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 ${"#D6D8F6"}`,
}}
>
<Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
</Group>
</Box>
</SimpleGrid>
</Box>
</Grid.Col>
</Grid>
);
}