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

Tambahan fix menu prestasi desa

Browse Source
This commit is contained in:
nico
2025-09-25 11:14:38 +08:00
parent cac146471a
commit d8fa56d923
2 changed files with 111 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
View File

@@ -1,47 +1,58 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react-hooks/exhaustive-deps */
'use client' 'use client'
import colors from '@/con/colors';
import { BackgroundImage, Box, Button, Center, Container, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
import { useRouter } from 'next/navigation';
import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa'; import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
import colors from '@/con/colors';
import { BackgroundImage, Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils'; import { useProxy } from 'valtio/utils';
import { useEffect, useState } from 'react'; import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
import { IconSearch } from '@tabler/icons-react';
import { useState } from 'react';
function Page() { function Page() {
const state = useProxy(prestasiState.prestasiDesa); const state = useProxy(prestasiState.prestasiDesa);
const [loading, setLoading] = useState(true);
const [prestasiData, setPrestasiData] = useState<any[]>([]);
const router = useRouter(); const router = useRouter();
const [search, setSearch] = useState("");
const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
useEffect(() => { const { data, page, totalPages, loading, load } = state.findMany;
const loadData = async () => {
try { useShallowEffect(() => {
setLoading(true); load(page, 3, debouncedSearch)
await prestasiState.kategoriPrestasi.findMany.load(); }, [page, debouncedSearch])
await state.findMany.load();
setPrestasiData(state.findMany.data || []); if (loading || !data) {
} catch (error) { return (
console.error('Error loading data:', error); <Stack py={10}>
} finally { <Skeleton height={600} radius="md" />
setLoading(false); </Stack>
} )
}; }
loadData();
}, []);
return ( return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} > <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
<Box px={{ base: "md", md: 100 }}><BackButton /></Box> <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }}> <Group justify='space-between' px={{ base: "md", md: 100 }}>
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}> <Box>
Prestasi Desa <Text fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
</Text> Prestasi Desa
<Text ta={"center"} py={10}> </Text>
Temukan berbagai prestasi dan keunggulan yang dimiliki Desa Darmasaba. <Text py={10}>
</Text> Temukan berbagai prestasi dan keunggulan yang dimiliki Desa Darmasaba.
</Container> </Text>
</Box>
<Box>
<TextInput
radius="xl"
placeholder="Cari prestasi atau kategori prestasi..."
value={search}
onChange={(e) => setSearch(e.target.value)}
leftSection={<IconSearch size={20} />}
w={300}
size="md"
/>
</Box>
</Group>
<SimpleGrid <SimpleGrid
px={{ base: "md", md: 100 }} px={{ base: "md", md: 100 }}
pb={20} pb={20}
@@ -50,65 +61,77 @@ function Page() {
md: 3, md: 3,
}} }}
> >
{loading ? ( {data.length === 0 ? (
<Center> <Text fz={"1.4rem"}>Tidak ada prestasi yang ditemukan</Text>
<Text fz={"2.4rem"}>Memuat Data...</Text>
</Center>
) : ( ) : (
prestasiData.map((v, k) => { data.map((v, k) => {
return ( return (
<BackgroundImage <BackgroundImage
key={k} key={k}
src={v.image?.link} src={v.image?.link || ''}
radius={16} radius={16}
pos={"relative"} pos={"relative"}
> >
<Box <Box
style={{ style={{
borderRadius: 16, borderRadius: 16,
zIndex: 0 zIndex: 0
}} }}
pos={"absolute"} pos={"absolute"}
w={"100%"} w={"100%"}
h={"100%"} h={"100%"}
bg={colors.trans.dark[2]} bg={colors.trans.dark[2]}
/> />
<Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}> <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
<Group> <Group>
<Paper radius={"lg"} py={7} px={10}> <Paper radius={"lg"} py={7} px={10}>
<Text>{v.kategori?.name}</Text> <Text>{v.kategori?.name}</Text>
</Paper> </Paper>
</Group> </Group>
<Box p={"lg"}> <Box p={"lg"}>
<Text <Text
fw={"bold"} fw={"bold"}
c={"white"} c={"white"}
size={"1.8rem"} size={"1.8rem"}
style={{ style={{
textAlign: "center", textAlign: "center",
lineHeight: 1.4, lineHeight: 1.4,
minHeight: '5.4rem', minHeight: '5.4rem',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}} }}
lineClamp={3} lineClamp={3}
dangerouslySetInnerHTML={{ __html: v.deskripsi }} dangerouslySetInnerHTML={{ __html: v.deskripsi }}
/> />
</Box> </Box>
<Group justify="center"> <Group justify="center">
<Button px={20} radius={"100"} size="md" bg={colors["blue-button"]} <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)}> onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)}>
Detail Detail
</Button> </Button>
</Group> </Group>
</Stack> </Stack>
</BackgroundImage> </BackgroundImage>
) )
}) })
)} )}
</SimpleGrid> </SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10)
window.scrollTo({ top: 0, behavior: 'smooth' })
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Stack> </Stack>
); );
} }

3
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
View File

@@ -107,9 +107,8 @@ function ModuleView() {
return ( return (
<ScrollArea h={280} // ✅ tinggi fixed, bisa disesuaikan <ScrollArea h={280} // ✅ tinggi fixed, bisa disesuaikan
scrollbarSize={8} scrollbarSize={2}
offsetScrollbars offsetScrollbars
type="never"
styles={{ styles={{
viewport: { paddingRight: 8 }, // kasih jarak biar scroll nggak dempet viewport: { paddingRight: 8 }, // kasih jarak biar scroll nggak dempet
}} }}