120 lines
2.7 KiB
TypeScript
120 lines
2.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|