147 lines
3.9 KiB
TypeScript
147 lines
3.9 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
"use client";
|
|
import stateLayananDesa from "@/app/admin/(dashboard)/_state/desa/layananDesa";
|
|
import colors from "@/con/colors";
|
|
import { Carousel } from "@mantine/carousel";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Container,
|
|
Divider,
|
|
Group,
|
|
Paper,
|
|
Skeleton,
|
|
Stack,
|
|
Text,
|
|
useMantineTheme
|
|
} from "@mantine/core";
|
|
import { useMediaQuery } from "@mantine/hooks";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
import _ from "lodash";
|
|
import { useTransitionRouter } from "next-view-transitions";
|
|
import Link from "next/link";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { useProxy } from "valtio/utils";
|
|
|
|
const textHeading = {
|
|
title: "Layanan",
|
|
des: "Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!",
|
|
};
|
|
function Layanan() {
|
|
|
|
return (
|
|
<Stack pos={"relative"} bg={colors.grey[1]} gap={"42"} py={"xl"}>
|
|
<Container w={{ base: "100%", md: "80%" }} p={"xl"} >
|
|
<Stack align="center" gap={"0"}>
|
|
<Text fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>
|
|
{textHeading.title}
|
|
</Text>
|
|
<Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
|
|
{textHeading.des}
|
|
</Text>
|
|
<Box p={"md"}>
|
|
<Button component={Link} href={"/darmasaba/desa/layanan"} variant="filled" bg={colors["blue-button"]} radius={100}>
|
|
Detail
|
|
</Button>
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
<Slider />
|
|
<Divider />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
const height = 720;
|
|
function Slider() {
|
|
const state = useProxy(stateLayananDesa)
|
|
const [loading, setLoading] = useState(false);
|
|
const theme = useMantineTheme();
|
|
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
|
|
const autoplay = useRef(Autoplay({ delay: 2000 }));
|
|
const router = useTransitionRouter()
|
|
|
|
useEffect(()=> {
|
|
const loadData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
await state.suratKeterangan.findMany.load()
|
|
} catch (error) {
|
|
console.error('Error loading data:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
loadData()
|
|
}, [])
|
|
|
|
const data = (state.suratKeterangan.findMany.data || []).slice(0, 8);
|
|
|
|
const slides = data.map((item) => (
|
|
<Carousel.Slide key={item.id} >
|
|
<Paper h={height} pos={"relative"} style={{
|
|
backgroundImage: `url(${item.image?.link})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}>
|
|
<Box
|
|
style={{
|
|
borderRadius: 16,
|
|
zIndex: 0,
|
|
}}
|
|
pos={"absolute"}
|
|
w={"100%"}
|
|
h={"100%"}
|
|
bg={colors.trans.dark[2]}
|
|
/>
|
|
<Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
|
|
<Box p={"lg"}>
|
|
<Text
|
|
|
|
fw={"bold"}
|
|
c={"white"}
|
|
size={"3.5rem"}
|
|
style={{
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{_.startCase(item.name)}
|
|
</Text>
|
|
</Box>
|
|
<Group justify="center">
|
|
<Button onClick={()=> router.push(`/darmasaba/desa/layanan/${item.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
|
|
Detail
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
</Carousel.Slide>
|
|
));
|
|
|
|
return (
|
|
<Box>
|
|
{loading ? (
|
|
<Skeleton height={height} />
|
|
) : (
|
|
<Carousel
|
|
plugins={[autoplay.current]}
|
|
onMouseEnter={autoplay.current.stop}
|
|
onMouseLeave={autoplay.current.reset}
|
|
height={height}
|
|
slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
|
|
slideGap={{ base: "xl", sm: "md" }}
|
|
loop
|
|
align="start"
|
|
slidesToScroll={mobile ? 1 : 2}
|
|
>
|
|
{slides}
|
|
</Carousel>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default Layanan;
|
|
|