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

Add All Skeleton Except Collaboration

Browse Source
This commit is contained in:
nico
2024-12-30 17:37:44 +08:00
parent 82a55d7148
commit a74a32b422
55 changed files with 305 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app_modules/donasi/component/card_view/card_publish_new.tsx
View File

@@ -5,6 +5,7 @@ import { Grid, Progress, Stack, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
import TampilanRupiahDonasi from "../tampilan_rupiah";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentDonasi_CardPublishNew({ data }: { data: any; }) {
const router = useRouter();
@@ -27,7 +28,7 @@ export default function ComponentDonasi_CardPublishNew({ data }: { data: any; })
<Grid.Col span={6}>
<Stack spacing={"xs"}>
<Stack spacing={0}>
<Text fz={"sm"} fw={"bold"} lineClamp={2}>
<Text c={MainColor.white} fz={"sm"} fw={"bold"} lineClamp={2}>
{data.title}
</Text>
<ComponentDonasi_TampilanHitungMundur
@@ -38,8 +39,8 @@ export default function ComponentDonasi_CardPublishNew({ data }: { data: any; })
</Stack>
<Progress value={+data.progres} color="yellow" />
<Stack spacing={0}>
<Text fz={"sm"}>Terkumpul</Text>
<Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
<Text c={MainColor.white} fz={"sm"}>Terkumpul</Text>
<Text c={MainColor.white} fz={"sm"} fw={"bold"} truncate>
<TampilanRupiahDonasi nominal={+data.terkumpul} />
</Text>
</Stack>

5
src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
View File

@@ -2,7 +2,8 @@
import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import { ActionIcon, Avatar, Group, Paper, Skeleton, Stack, Text, Title, } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { ActionIcon, Avatar, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { IconCircleChevronRight } from "@tabler/icons-react";
import _ from "lodash";
@@ -54,7 +55,7 @@ export default function ComponentDonasi_InformasiPenggalangMainNew() {
}}
>
{
loading ? <Skeleton height={100} radius="md" width={"100%"} />
loading ? <CustomSkeleton height={100} radius="md" width={"100%"} />
:
<Stack>
<Group position="apart">

11
src/app_modules/donasi/component/detail_main/skeleton_cerita_penggalang.tsx
View File

@@ -1,13 +1,14 @@
import { Box, Skeleton } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box } from "@mantine/core";
export default function SkeletonCeritaPenggalangDonasi() {
return (
<>
<Box mb={"md"}>
<Skeleton height={10} mt={0} radius="xl" width={"50%"} />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
<CustomSkeleton height={10} mt={0} radius="xl" width={"50%"} />
<CustomSkeleton height={10} mt={10} radius="xl" />
<CustomSkeleton height={10} mt={10} radius="xl" />
<CustomSkeleton height={10} mt={10} radius="xl" />
</Box>
</>
);

13
src/app_modules/donasi/component/detail_main/skeleton_detail_dana_donasi.tsx
View File

@@ -1,19 +1,20 @@
import { Box, Skeleton } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box } from "@mantine/core";
export default function SkeletonDetailDanaDonasi() {
return (
<>
<Box>
<Box mb={"md"}>
<Skeleton height={150} radius="md" />
<CustomSkeleton height={150} radius="md" />
</Box>
<Box mb={"md"}>
<Skeleton height={10} mt={10} radius="xl" width={"50%"} />
<Skeleton height={10} mt={10} radius="xl" />
<Skeleton height={10} mt={10} radius="xl" />
<CustomSkeleton height={10} mt={10} radius="xl" width={"50%"} />
<CustomSkeleton height={10} mt={10} radius="xl" />
<CustomSkeleton height={10} mt={10} radius="xl" />
</Box>
<Box>
<Skeleton height={50} radius="md" />
<CustomSkeleton height={50} radius="md" />
</Box>
</Box>
</>

7
src/app_modules/donasi/component/skeleton_donasi.tsx
View File

@@ -1,5 +1,6 @@
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { Box, Grid, Skeleton } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Grid } from "@mantine/core";
export default function SkeletonDonasi() {
return <>
@@ -8,7 +9,7 @@ export default function SkeletonDonasi() {
<ComponentGlobal_CardStyles key={index}>
<Grid>
<Grid.Col span={6}>
<Skeleton w={"100%"} height={100} radius="md" />
<CustomSkeleton w={"100%"} height={100} radius="md" />
</Grid.Col>
<Grid.Col span={6}>
<Box>
@@ -16,7 +17,7 @@ export default function SkeletonDonasi() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={12}>
<Skeleton w={"100%"} h={15} />
<CustomSkeleton w={"100%"} h={15} />
</Grid.Col>
</Grid>
</Box>

7
src/app_modules/donasi/component/skeleton_donasi_saya.tsx
View File

@@ -1,5 +1,6 @@
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { Box, Grid, Skeleton } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Grid } from "@mantine/core";
export default function SkeletonDonasiSaya() {
return <>
@@ -13,7 +14,7 @@ export default function SkeletonDonasiSaya() {
<Box key={index} py={5}>
<Grid align="center">
<Grid.Col span={12}>
<Skeleton w={"100%"} h={15} />
<CustomSkeleton w={"100%"} h={15} />
</Grid.Col>
</Grid>
</Box>
@@ -22,7 +23,7 @@ export default function SkeletonDonasiSaya() {
</Grid.Col>
<Grid.Col span={6}>
<Skeleton w={"100%"} height={100} radius="md" />
<CustomSkeleton w={"100%"} height={100} radius="md" />
</Grid.Col>
</Grid>
</ComponentGlobal_CardStyles>

13
src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
View File

@@ -1,20 +1,21 @@
import { Box, Skeleton, Stack } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Box, Stack } from "@mantine/core";
export default function SkeletonEditDonasi() {
return (
<>
<Box>
<Stack align="center" mb={40}>
<Skeleton height={40} width={"100%"} />
<Skeleton height={300} width={"100%"} my={"xs"} />
<Skeleton height={40} width={"40%"} radius={"lg"} />
<CustomSkeleton height={40} width={"100%"} />
<CustomSkeleton height={300} width={"100%"} my={"xs"} />
<CustomSkeleton height={40} width={"40%"} radius={"lg"} />
</Stack>
<Stack align="center">
{[...Array(5)].map((_, index) => (
<Skeleton key={index} height={40} width={"100%"} my={"xs"} />
<CustomSkeleton key={index} height={40} width={"100%"} my={"xs"} />
))}
<Skeleton height={40} width={"100%"} radius={"lg"} mt={30} />
<CustomSkeleton height={40} width={"100%"} radius={"lg"} mt={30} />
</Stack>
</Box>