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

10
src/app_modules/auth/login/view.tsx
View File

@@ -56,15 +56,19 @@ export default function Login({ version }: { version: string }) {
<UIGlobal_LayoutDefault>
<Stack align="center" justify="center" h={"100vh"} spacing={100}>
<Stack align="center" spacing={0}>
<Title order={3} c={MainColor.yellow}>
<Title order={3} c={MainColor.yellow} >
WELCOME TO
</Title>
<Title c={MainColor.yellow}>HIPMI APPS</Title>
<Title c={MainColor.yellow} >
HIPMI APPS
</Title>
</Stack>
<Stack w={300}>
<Center>
<Text c={MainColor.white}>Nomor telepon</Text>
<Text c={MainColor.white} >
Nomor telepon
</Text>
</Center>
<PhoneInput
inputStyle={{ width: "100%" }}

55
src/app_modules/auth/validasi/skeleton.tsx
View File

@@ -1,24 +1,24 @@
import { Stack, Skeleton, Group } from "@mantine/core";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { Group, Skeleton, Stack } from "@mantine/core";
export default function Validasi_SkeletonView() {
return (
<Stack align="center" justify="center" h={"100vh"} spacing={50}>
<Skeleton h={30} w={250} radius={"xl"} />
<CustomSkeleton h={30} w={250} radius={"xl"} />
<Stack spacing={"md"} align="center">
<Stack mb={15}>
<Skeleton h={20} w={250} radius={"xl"} />
<Skeleton h={20} w={250} radius={"xl"} />
</Stack>
<Group mb={10}>
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} h={50} w={50} radius={"sm"} />
))}
</Group>
<Skeleton h={20} w={250} radius={"xl"} />
<Stack mb={15}>
<CustomSkeleton h={20} w={250} radius={"xl"} />
<CustomSkeleton h={20} w={250} radius={"xl"} />
</Stack>
<Skeleton h={50} w={250} radius={"sm"} />
<Group mb={10}>
{Array.from({ length: 4 }).map((_, i) => (
<CustomSkeleton key={i} h={50} w={50} radius={"sm"} />
))}
</Group>
<CustomSkeleton h={20} w={250} radius={"xl"} />
</Stack>
<CustomSkeleton h={50} w={250} radius={"sm"} />
</Stack>
);
}
@@ -39,3 +39,28 @@ export default function Validasi_SkeletonView() {
<Skeleton h={50} w={250} radius={"sm"} />
</Stack> */}
// import { Stack, Skeleton, Group } from "@mantine/core";
// export default function Validasi_SkeletonView() {
// return (
// <Stack align="center" justify="center" h={"100vh"} spacing={50}>
// <Skeleton h={30} w={250} radius={"xl"} />
// <Stack spacing={"md"} align="center">
// <Stack mb={15}>
// <Skeleton h={20} w={250} radius={"xl"} />
// <Skeleton h={20} w={250} radius={"xl"} />
// </Stack>
// <Group mb={10}>
// {Array.from({ length: 4 }).map((_, i) => (
// <Skeleton key={i} h={50} w={50} radius={"sm"} />
// ))}
// </Group>
// <Skeleton h={20} w={250} radius={"xl"} />
// </Stack>
// <Skeleton h={50} w={250} radius={"sm"} />
// </Stack>
// );
// }