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

Fix Validasi di bagian Skeleton dan Fontnya

Browse Source
This commit is contained in:
nico
2024-12-26 14:57:53 +08:00
parent 86433eb589
commit 5448c3a001
3 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -67,7 +67,7 @@ export default function Login({ version }: { version: string }) {
<Text c={MainColor.white}>Nomor telepon</Text> <Text c={MainColor.white}>Nomor telepon</Text>
</Center> </Center>
<PhoneInput <PhoneInput
inputStyle={{ width: "100%", }} inputStyle={{ width: "100%" }}
defaultCountry="id" defaultCountry="id"
onChange={(val) => { onChange={(val) => {
setPhone(val); setPhone(val);

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

@@ -2,8 +2,27 @@ import { Stack, Skeleton, Group } from "@mantine/core";
export default function Validasi_SkeletonView() { export default function Validasi_SkeletonView() {
return ( return (
<> <Stack align="center" justify="center" h={"100vh"} spacing={50}>
<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>
);
}
{/* <Stack align="center" justify="center" h={"100vh"} spacing={50}>
<Skeleton h={30} w={250} radius={"xl"} /> <Skeleton h={30} w={250} radius={"xl"} />
<Stack> <Stack>
<Skeleton h={20} w={250} radius={"xl"} /> <Skeleton h={20} w={250} radius={"xl"} />
@@ -19,7 +38,4 @@ export default function Validasi_SkeletonView() {
<Skeleton h={20} w={250} radius={"xl"} /> <Skeleton h={20} w={250} radius={"xl"} />
<Skeleton h={50} w={250} radius={"sm"} /> <Skeleton h={50} w={250} radius={"sm"} />
</Stack> </Stack> */}
</>
);
}

12
src/app_modules/auth/validasi/view.tsx
View File

@@ -197,8 +197,8 @@ export default function Validasi() {
<Stack spacing={"md"} align="center"> <Stack spacing={"md"} align="center">
<Stack spacing={0} align="center"> <Stack spacing={0} align="center">
<Text c={"white"}>Masukan 4 digit kode otp</Text> <Text c={MainColor.white}>Masukan 4 digit kode otp</Text>
<Text c={"white"}> <Text c={MainColor.white}>
Yang dikirim ke{" "} Yang dikirim ke{" "}
<Text span inherit fw={"bold"}> <Text span inherit fw={"bold"}>
{" "} {" "}
@@ -207,12 +207,14 @@ export default function Validasi() {
</Text> </Text>
</Stack> </Stack>
<Center> <Center>
<PinInput <PinInput
size="xl" size="xl"
type={"number"} type={"number"}
ref={focusTrapRef} ref={focusTrapRef}
spacing={"md"} spacing={"md"}
mt={"md"} mt={"md"}
styles={{ input: { backgroundColor: MainColor.white } }}
onChange={(val) => { onChange={(val) => {
setInputOtp(val); setInputOtp(val);
}} }}
@@ -220,7 +222,7 @@ export default function Validasi() {
</Center> </Center>
<Stack h={"5vh"} align="center" justify="center"> <Stack h={"5vh"} align="center" justify="center">
<Text fs="italic" c={"white"}> <Text fs="italic" c={MainColor.white}>
Tidak menerima kode ?{" "} Tidak menerima kode ?{" "}
{counter > 0 ? ( {counter > 0 ? (
<Text fw={"bold"} inherit span> <Text fw={"bold"} inherit span>