wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : add module

Browse Source 
Deskripsi:
- add global
- add login
- add varification
- add welcome
- add home

No issue
This commit is contained in:
lukman
2024-07-03 14:27:32 +08:00
parent 497e38cf6f
commit e70103e2f7
10 changed files with 335 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/module/auth/index.ts
View File

@@ -0,0 +1,7 @@
import ViewLogin from "./login/view/view_login";
import ViewVerification from "./varification/view/view_verification";
import { ViewWelcome } from "./welcome/view_welcome";
export { ViewLogin }
export { ViewVerification }
export { ViewWelcome }

77
src/module/auth/login/view/view_login.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client"
import { LayoutLogin, WARNA } from "@/module/_global";
import {
Box,
Button,
Checkbox,
Image,
rem,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import React from "react";
function ViewLogin() {
const router = useRouter()
const textInfo =
"Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda.";
function onMasuk() {
router.push("/verification")
}
return (
<>
<Box p={10}>
<LayoutLogin>
<Stack pt={30}>
<Box p={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
type="number"
radius={30}
leftSection={<Text>+62</Text>}
placeholder="XXX XXX XXX"
/>
<Text fz={10} mt={10} c={WARNA.biruTua}>
{textInfo}
</Text>
<Checkbox
mt={20}
label={
<Text fz={10} c={WARNA.biruTua}>
Ingat saya
</Text>
}
/>
<Box mt={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={onMasuk}
>
MASUK
</Button>
</Box>
</Box>
</Stack>
</LayoutLogin>
</Box>
</>
);
}
export default ViewLogin;

61
src/module/auth/varification/view/view_verification.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client";
import { LayoutLogin, WARNA } from "@/module/_global";
import { Box, Button, PinInput, Stack, Text, Title } from "@mantine/core";
import { useRouter } from "next/navigation";
import React from "react";
export default function ViewVerification() {
const router = useRouter();
function onNext() {
router.push("/welcome");
}
return (
<>
<Box p={10}>
<LayoutLogin>
<Stack pt={30}>
<Box p={10}>
<Title order={5} c={WARNA.biruTua}>
Verifikasi Nomor Telepon
</Title>
<Text fz={12} c={WARNA.biruTua}>
Masukkan kode yang kami kirimkan melalui WhatsApp
</Text>
<Text fz={12} c={WARNA.biruTua} fw={"bold"}>
+6287701790942
</Text>
<Box pt={30}>
<PinInput
style={{ justifyContent: "center" }}
placeholder=""
size="lg"
styles={{
input: {
color: WARNA.biruTua,
// backgroundColor: WARNA.biruTua,
borderRadius: 15,
borderColor: WARNA.biruTua,
},
}}
/>
</Box>
<Box mt={40}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
onClick={onNext}
>
Lanjut
</Button>
</Box>
</Box>
</Stack>
</LayoutLogin>
</Box>
</>
);
}

119
src/module/auth/welcome/view_welcome.tsx Normal file
View File

@@ -0,0 +1,119 @@
"use client";
import {
Anchor,
Button,
Center,
Flex,
Group,
Image,
Stack,
Text,
} from "@mantine/core";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { WARNA } from "@/module/_global";
const listTextWellcome = [
{
id: "1",
text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Proyek Desa dengan Fitur Kolaboratif Manajemen Proyek yang Efisien untuk Masa Depan Yang Lebih Baik",
img: "/assets/img/welcome/wellcome-1.png",
},
{
id: "2",
text: "Monitor Progres Tugas Secara Real-time Kolaborasi Tim yang Dinamis untuk Sukses Bersama Perencanaan Tugas yang Terstruktur untuk Pertumbuhan Desa",
img: "/assets/img/welcome/wellcome-2.png",
},
{
id: "3",
text: "Mulai Membangun Desa dengan Teknologi Canggih Manfaatkan Fitur Analytics untuk Keputusan yang Lebih Baik Selamat Bergabung di Komunitas Desa Darmasaba yang Progresif",
img: "/assets/img/welcome/wellcome-3.png",
},
];
export function ViewWelcome() {
const [index, setIndex] = useState(0);
const router = useRouter();
function onLanjutkan() {
if (index === listTextWellcome.length - 1) {
return router.push("/home");
}
setIndex(index + 1);
}
function onSebelumnya() {
if (index === 0) {
return;
}
setIndex(index - 1);
}
return (
<Stack>
<Group pos={"absolute"} top={20} right={40}>
<Anchor>Lewati</Anchor>
</Group>
<Stack gap={"xl"} p={"xl"} pt={50}>
<WelcomeItem index={index} listTextWellcome={listTextWellcome} />
</Stack>
<Flex
w={"100%"}
pos={"absolute"}
bottom={0}
justify={"space-between"}
left={0}
right={0}
p={"xl"}
align={"center"}
>
<Button
display={index === 0 ? "none" : "block"}
onClick={onSebelumnya}
radius={100}
size="md"
color={WARNA.biruTua}
>
Sebelumnya
</Button>
<Text>
{index + 1}/{listTextWellcome.length}
</Text>
<Button
onClick={onLanjutkan}
radius={100}
size="md"
color={WARNA.biruTua}
>
Lanjutkan
</Button>
</Flex>
</Stack>
);
}
function WelcomeItem({
index,
listTextWellcome,
}: {
index: number;
listTextWellcome: any[];
}) {
return (
<Stack align="center" justify="center">
<Center>
<Image
w={"90%"}
src={listTextWellcome[index].img}
alt="gambar wellcome"
/>
</Center>
<Text
style={{
textAlign: "center",
}}
>
{listTextWellcome[index].text}
</Text>
</Stack>
);
}