diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts new file mode 100644 index 0000000..d9f6868 --- /dev/null +++ b/src/module/_global/fun/WARNA.ts @@ -0,0 +1,4 @@ +export const WARNA = { + bgWhite: "#F4F9FD", + biruTua: "#19345E", +} \ No newline at end of file diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index e69de29..7c77fb9 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -0,0 +1,7 @@ +import { WARNA } from "./fun/WARNA"; +import LayoutLogin from "./layout/layout_login"; +import LayoutNavbarHome from "./layout/layout_navbar_home"; + +export { WARNA } +export { LayoutLogin } +export {LayoutNavbarHome} \ No newline at end of file diff --git a/src/module/_global/layout/layout_login.tsx b/src/module/_global/layout/layout_login.tsx new file mode 100644 index 0000000..806768f --- /dev/null +++ b/src/module/_global/layout/layout_login.tsx @@ -0,0 +1,21 @@ +import { Image, rem, Stack, Title } from "@mantine/core"; +import React from "react"; +import { WARNA } from "../fun/WARNA"; + +export default function LayoutLogin({ + children, +}: { + children: React.ReactNode; +}) { + return ( + <> + + logo + + PERBEKAL DARMASABA + + + {children} + + ); +} diff --git a/src/module/_global/layout/layout_navbar_home.tsx b/src/module/_global/layout/layout_navbar_home.tsx new file mode 100644 index 0000000..66d22c5 --- /dev/null +++ b/src/module/_global/layout/layout_navbar_home.tsx @@ -0,0 +1,19 @@ +import { Box, Grid, Group } from '@mantine/core'; +import React from 'react'; +import { WARNA } from '../fun/WARNA'; + +export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => { + return ( + <> + + {children} + + + ); +} +export default LayoutNavbarHome \ No newline at end of file diff --git a/src/module/auth/index.ts b/src/module/auth/index.ts index e69de29..3f6d0c0 100644 --- a/src/module/auth/index.ts +++ b/src/module/auth/index.ts @@ -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 } \ No newline at end of file diff --git a/src/module/auth/login/view/view_login.tsx b/src/module/auth/login/view/view_login.tsx new file mode 100644 index 0000000..19490b0 --- /dev/null +++ b/src/module/auth/login/view/view_login.tsx @@ -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 ( + <> + + + + + +62} + placeholder="XXX XXX XXX" + /> + + {textInfo} + + + Ingat saya + + } + /> + + + + + + + + + ); +} + +export default ViewLogin; diff --git a/src/module/auth/varification/view/view_verification.tsx b/src/module/auth/varification/view/view_verification.tsx new file mode 100644 index 0000000..0c823fb --- /dev/null +++ b/src/module/auth/varification/view/view_verification.tsx @@ -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 ( + <> + + + + + + Verifikasi Nomor Telepon + + + Masukkan kode yang kami kirimkan melalui WhatsApp + + + +6287701790942 + + + + + + + + + + + + + ); +} diff --git a/src/module/auth/welcome/view_welcome.tsx b/src/module/auth/welcome/view_welcome.tsx new file mode 100644 index 0000000..5c6503c --- /dev/null +++ b/src/module/auth/welcome/view_welcome.tsx @@ -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 ( + + + Lewati + + + + + + + + {index + 1}/{listTextWellcome.length} + + + + + ); +} + +function WelcomeItem({ + index, + listTextWellcome, +}: { + index: number; + listTextWellcome: any[]; +}) { + return ( + +
+ gambar wellcome +
+ + {listTextWellcome[index].text} + + + ); +} diff --git a/src/module/home/index.ts b/src/module/home/index.ts new file mode 100644 index 0000000..f731d3a --- /dev/null +++ b/src/module/home/index.ts @@ -0,0 +1,3 @@ +import ViewHome from "./view/view_home"; + +export {ViewHome} \ No newline at end of file diff --git a/src/module/home/view/view_home.tsx b/src/module/home/view/view_home.tsx new file mode 100644 index 0000000..aa85323 --- /dev/null +++ b/src/module/home/view/view_home.tsx @@ -0,0 +1,17 @@ +import { LayoutNavbarHome } from '@/module/_global'; +import { Group, Text } from '@mantine/core'; +import React from 'react'; + +export default function ViewHome() { + return ( + <> + + + Perbekal Darmasaba + icon + + + + ); +} +