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

Sinkronisasi UI Admin & User Menu Landing Page, submenu Prestasi Desa

Browse Source
This commit is contained in:
nico
2025-08-04 16:28:53 +08:00
parent 73ae198158
commit 0e55462adc
11 changed files with 372 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/app/darmasaba/_com/main-page/prestasi/index.tsx
View File

@@ -1,31 +1,34 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import prestasiState from "@/app/admin/(dashboard)/_state/landing-page/prestasi-desa";
import colors from "@/con/colors";
import { BackgroundImage, Box, Button, Center, Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
import { useProxy } from "valtio/utils";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
const data = [
{
id: 1,
title: "Olahraga dan Kepemudaan",
deskripsi: "Tim Bola Voli Putri Dharma Temaja meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali ",
image: "/api/img/prestasi-voli.jpeg",
link: "/darmasaba/prestasi-desa/tim-bola-voli-putri-dharma-temaja-meraih-juara-3-dalam-turnamen-bola-voli-mangupura-cup-2024-kategori-putri-se-bali"
},
{
id: 2,
title: "Hukum dan Kesadaran Masyarakat",
deskripsi: "Prestasi Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024",
image: "/api/img/prestasilombahukum.png",
link: "/darmasaba/prestasi-desa/prestasi-juara-3-dalam-lomba-keluarga-sadar-hukum-kabupaten-badung-tahun-2024"
},
{
id: 3,
title: "Tata Kelola dan Inovasi Desa",
deskripsi: "Peringkat 5 Dalam Ajang Bergengsi Mangupura Award",
image: "/api/img/prestasi-peringkat-5.jpeg",
link: "/darmasaba/prestasi-desa/peringkat-5-dalam-ajang-bergengsi-mangupura-award"
}
]
function Prestasi() {
const state = useProxy(prestasiState.prestasiDesa);
const [loading, setLoading] = useState(false);
const router = useRouter()
useEffect(() => {
prestasiState.kategoriPrestasi.findMany.load()
const loadData = async () => {
try {
setLoading(true);
await state.findMany.load();
} catch (error) {
console.error('Error loading data:', error);
} finally {
setLoading(false);
}
}
loadData();
}, [])
const data = (state.findMany.data || []).slice(0, 3);
return (
<>
<Stack p={"sm"}>
@@ -43,52 +46,56 @@ function Prestasi() {
sm: 3
}}
>
{data.map((v, k) => {
return (
<BackgroundImage
key={k}
src={v.image}
h={720}
radius={16}
pos={"relative"}
>
<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"}>
{loading ? (
<Center>
<Text fz={"2.4rem"}>Memuat Data...</Text>
</Center>
) : (
data.map((v, k) => {
return (
<BackgroundImage
key={k}
src={v.image?.link || ''}
radius={16}
pos={"relative"}
>
<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
c={"white"}
fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }}
ta={"center"}
>
{v.kategori.name}
</Text>
</Box>
<Text
fw={"bold"}
c={"white"}
fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem"}}
fz={{ base: "2rem", md: "2.5rem", lg: "2.7rem", xl: "3rem" }}
ta={"center"}
>
{v.title}
</Text>
</Box>
<Text
fw={"bold"}
c={"white"}
fz={{base: "2rem", md: "2.5rem", lg: "2.7rem", xl: "3rem"}}
ta={"center"}
>
{v.deskripsi}
</Text>
<Group justify="center">
<Button component={Link} href={v.link} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
Lihat Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
)
})}
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
/>
<Group justify="center">
<Button onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
Lihat Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
)
})
)}
</SimpleGrid>
</Box>
</Stack>