wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skeleton color validasi and katalog

Browse Source
This commit is contained in:
nico
2024-12-27 12:06:47 +08:00
parent d8f56309b0
commit b467aedece
17 changed files with 274 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app_modules/katalog/ui/list_portolio_new.tsx
View File

@@ -7,6 +7,7 @@ import { useShallowEffect } from "@mantine/hooks";
import _ from "lodash";
import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
import { IconCaretRight } from "@tabler/icons-react";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
export default function ListPortofolioProfileNew() {
const router = useRouter();
@@ -58,8 +59,8 @@ export default function ListPortofolioProfileNew() {
{
loading ?
<>
<Skeleton height={70} radius={"md"} width={"100%"} />
<Skeleton height={70} radius={"md"} width={"100%"} />
<CustomSkeleton height={70} radius={"md"} width={"100%"} />
<CustomSkeleton height={70} radius={"md"} width={"100%"} />
</>
:

63
src/app_modules/katalog/ui/skeleton_profile.tsx
View File

@@ -1,10 +1,11 @@
import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
export default function SkeletonProfile() {
return (
<>
<Box mb={"lg"}>
<Skeleton height={200} radius={"md"} />
<CustomSkeleton height={200} radius={"md"} />
<Box
sx={{
position: "relative",
@@ -14,12 +15,12 @@ export default function SkeletonProfile() {
}}
>
<Center>
<Avatar radius={"50%"} size={100} />
<CustomSkeleton circle height={100} width={100} />
</Center>
</Box>
<Stack align="center" justify="center" spacing={"xs"}>
<Skeleton height={15} radius={"md"} width={"50%"} />
<Skeleton height={15} radius={"md"} width={"50%"} />
<CustomSkeleton height={15} radius={"md"} width={"50%"} />
<CustomSkeleton height={15} radius={"md"} width={"50%"}/>
</Stack>
<Box mt={"lg"}>
@@ -28,10 +29,10 @@ export default function SkeletonProfile() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={1}>
<Skeleton w={25} h={25} />
<CustomSkeleton w={25} h={25}/>
</Grid.Col>
<Grid.Col span={11}>
<Skeleton w={"50%"} h={15} />
<CustomSkeleton w={"50%"} h={15}/>
</Grid.Col>
</Grid>
</Box>
@@ -40,5 +41,49 @@ export default function SkeletonProfile() {
</Box>
</Box>
</>
)
}
);
}
// import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
// export default function SkeletonProfile() {
// return (
// <>
// <Box mb={"lg"}>
// <Skeleton height={200} radius={"md"} />
// <Box
// sx={{
// position: "relative",
// bottom: 60,
// width: "100%",
// marginBottom: -30,
// }}
// >
// <Center>
// <Avatar radius={"50%"} size={100} />
// </Center>
// </Box>
// <Stack align="center" justify="center" spacing={"xs"}>
// <Skeleton height={15} radius={"md"} width={"50%"} />
// <Skeleton height={15} radius={"md"} width={"50%"} />
// </Stack>
// <Box mt={"lg"}>
// <Stack spacing={"xs"}>
// {[...Array(4)].map((_, index) => (
// <Box key={index} py={5}>
// <Grid align="center">
// <Grid.Col span={1}>
// <Skeleton w={25} h={25} />
// </Grid.Col>
// <Grid.Col span={11}>
// <Skeleton w={"50%"} h={15} />
// </Grid.Col>
// </Grid>
// </Box>
// ))}
// </Stack>
// </Box>
// </Box>
// </>
// )
// }