Files
hipmi/src/app_modules/notifikasi/component/card_skeleton.tsx
Bagasbanuna02 a6bb993b0d # fix
## Deskripsi:
- Perubahan tampilan notifikasi
- Pin map sesuai logo
- Pin map bisa custom
### No Issue
2024-08-23 14:15:11 +08:00

63 lines
1.4 KiB
TypeScript

"use client";
import {
AccentColor,
MainColor,
} from "@/app_modules/_global/color/color_pallet";
import {
Box,
Card,
Divider,
Group,
Skeleton,
Stack,
Text,
} from "@mantine/core";
export function ComponentNotifikasi_CardSkeleton() {
return (
<>
{Array.from(new Array(10)).map((e, i) => (
<Card
key={i}
py={30}
style={{
backgroundColor: MainColor.darkblue,
color: "gray",
border: `2px solid ${AccentColor.darkblue}`,
borderRadius: "10px 10px 10px 10px",
}}
mb={"xs"}
>
<Card.Section px={"lg"}>
<Stack>
<Group position="apart">
<Skeleton h={20} w={100} radius={"xl"} />
<Skeleton h={20} w={100} radius={"xl"} />
</Group>
<Divider color="gray" />
</Stack>
</Card.Section>
<Card.Section p={"lg"}>
<Stack>
<Skeleton h={20} radius={"xl"} />
<Skeleton h={20} radius={"xl"} />
</Stack>
</Card.Section>
<Card.Section px={"lg"}>
<Stack>
<Group position="apart">
<Skeleton h={20} w={100} radius={"xl"} />
<Skeleton h={20} w={100} radius={"xl"} />
</Group>
</Stack>
</Card.Section>
</Card>
))}
</>
);
}