130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
'use client';
|
|
import penghargaanState from "@/app/admin/(dashboard)/_state/desa/penghargaan";
|
|
import { Stack, Box, Container, Button, Text, Loader, Paper } from "@mantine/core";
|
|
import { IconAward, IconArrowRight } from "@tabler/icons-react";
|
|
import { useTransitionRouter } from 'next-view-transitions';
|
|
import { useEffect, useState } from "react";
|
|
import { useProxy } from "valtio/utils";
|
|
import { useMediaQuery } from "@mantine/hooks";
|
|
|
|
function Penghargaan() {
|
|
const router = useTransitionRouter();
|
|
const state = useProxy(penghargaanState);
|
|
const [loading, setLoading] = useState(false);
|
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
|
|
useEffect(() => {
|
|
const loadData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
await state.findMany.load();
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
loadData();
|
|
}, []);
|
|
|
|
// kalau mobile ambil 1 data aja, kalau desktop ambil 3
|
|
const data = state.findMany.data?.slice(0, isMobile ? 1 : 3);
|
|
|
|
return (
|
|
<Stack pos="relative" h="auto" mih={{ base: 500, md: 720 }}>
|
|
<video
|
|
loop
|
|
autoPlay
|
|
muted
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "cover",
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
zIndex: 0,
|
|
}}
|
|
>
|
|
<source src="/assets/videos/award.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
<Box
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
background: "linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.85))",
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<Container w={{ base: "100%", md: "80%" }} mih={{ base: 500, md: 720 }} p="xl">
|
|
<Stack justify="center" align="center" gap="xl" h="100%">
|
|
<Text
|
|
fw={900}
|
|
fz={{ base: "2rem", md: "2.8rem" }}
|
|
ta="center"
|
|
variant="gradient"
|
|
gradient={{ from: "cyan", to: "blue", deg: 60 }}
|
|
>
|
|
Penghargaan Desa
|
|
</Text>
|
|
|
|
{loading ? (
|
|
<Stack align="center" gap="sm">
|
|
<Loader color="blue" size="lg" />
|
|
<Text c="gray.3" fz="lg">Sedang memuat data penghargaan...</Text>
|
|
</Stack>
|
|
) : data && data.length > 0 ? (
|
|
<Stack gap="md" w="100%" maw={600}>
|
|
{data.map((v, k) => (
|
|
<Paper
|
|
key={k}
|
|
withBorder
|
|
radius="xl"
|
|
p="lg"
|
|
shadow="xl"
|
|
style={{
|
|
background: "rgba(255,255,255,0.07)",
|
|
backdropFilter: "blur(12px)",
|
|
transition: "all 0.3s ease",
|
|
}}
|
|
>
|
|
<Stack align="center" gap="xs">
|
|
<IconAward size={40} color="var(--mantine-color-blue-4)" />
|
|
<Text fz="lg" fw={700} c="white" ta="center">
|
|
{v.name}
|
|
</Text>
|
|
</Stack>
|
|
</Paper>
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Stack align="center" gap="xs">
|
|
<IconAward size={48} color="var(--mantine-color-gray-5)" />
|
|
<Text c="gray.4" fz="lg" ta="center">
|
|
Belum ada penghargaan yang tercatat
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
|
|
<Button
|
|
size="lg"
|
|
radius="xl"
|
|
variant="gradient"
|
|
gradient={{ from: "#26667F", to: "#124170", deg: 45 }}
|
|
rightSection={<IconArrowRight size={20} />}
|
|
onClick={() => router.push("/darmasaba/penghargaan")}
|
|
>
|
|
Lihat Semua Penghargaan
|
|
</Button>
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Penghargaan;
|