Sinkronisasi UI Admin & User Menu Landing Page, submenu Prestasi Desa
This commit is contained in:
@@ -77,8 +77,10 @@ function ListPrestasi({ search }: { search: string }) {
|
||||
<Text truncate="end" fz={"sm"}>{item.name}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
|
||||
<TableTd >
|
||||
<Box w={150}>
|
||||
<Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>{item.kategori?.name}</TableTd>
|
||||
<TableTd>
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Box, Text, Image, ActionIcon, Divider, Flex } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} c={colors["blue-button"]} fw={"bold"}>
|
||||
Peringkat 5 Dalam Ajang Bergengsi Mangupura Award
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
fz={"1.5rem"}
|
||||
>
|
||||
Tata Kelola dan Inovasi Desa
|
||||
</Text>
|
||||
</Box>
|
||||
<Image src="/api/img/prestasi-peringkat-5.jpeg" alt='' w={"100%"} />
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Pada hari Senin, 18 November 2024, Desa Darmasaba kembali mencetak prestasi gemilang dengan meraih peringkat V dalam ajang bergengsi Mangupura Award. Penganugerahan ini berlangsung dalam rangkaian acara HUT Kota Mangupura ke-15 yang dihadiri oleh Drs. I Ketut Suiasa, S.H., Plt Bupati Badung, serta para tokoh penting lainnya.
|
||||
</Text>
|
||||
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Penghargaan ini bukan hanya sebuah pengakuan, tetapi juga menjadi motivasi bagi Desa Darmasaba untuk terus meningkatkan inovasi, pelayanan, pembangunan serta transformasi digital.
|
||||
Mari bersama kita lanjutkan semangat kolaborasi dan inovasi untuk menjadikan Darmasaba sebagai desa yang semakin unggul dan inspiratif!
|
||||
</Text>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Bersama, kita terus wujudkan Desa Darmasaba yang sadar hukum dan berprestasi!
|
||||
</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={'md'}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider color={colors["blue-button"]} pb={50} />
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,64 +0,0 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Box, Text, Image, ActionIcon, Divider, Flex } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
|
||||
Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
fz={"1.5rem"}
|
||||
>
|
||||
Hukum dan Kesadaran Masyarakat
|
||||
</Text>
|
||||
</Box>
|
||||
<Image src="/api/img/prestasilombahukum.png" alt='' w={"100%"} />
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Dengan bangga, KADARKUM Desa Darmasaba berhasil meraih Juara 3 dalam Lomba Keluarga Sadar Hukum Kabupaten Badung Tahun 2024.
|
||||
Prestasi ini tidak lepas dari dukungan penuh dan semangat tinggi dari Ida Bagus Surya Prabhawa Manuaba, S.H., M.H., NL.P. selaku Perbekel Darmasaba yang selalu mendampingi dari proses pelatihan hingga perlombaan, serta turut hadir perwakilan Kecamatan Abiansemal, Ketua BPD Desa Darmasaba, Ketua TP PKK Desa Darmasaba, Perangkat & Staf Desa Darmasaba, Karang Taruna Paramartha Dharma Desa Darmasaba dan seluruh Tim Sukses KADARKUM Desa Darmasaba.
|
||||
</Text>
|
||||
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Acara yang berlangsung pada 14 November 2024 di Kertha Gosana Lt. 3 Pusat Pemerintahan Kabupaten Badung ini menjadi bukti nyata bahwa kerja keras dan kolaborasi adalah kunci keberhasilan.
|
||||
</Text>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Bersama, kita terus wujudkan Desa Darmasaba yang sadar hukum dan berprestasi!
|
||||
</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={'md'}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider color={colors["blue-button"]} pb={50} />
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,62 +0,0 @@
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Container, Box, Text, Image, ActionIcon, Divider, Flex } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import React from 'react';
|
||||
function Page() {
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }} >
|
||||
<Box pb={20}>
|
||||
<Text ta={"center"} fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}} c={colors["blue-button"]} fw={"bold"}>
|
||||
Juara 3 Turnamen Bola Voli Mangupura Cup 2024
|
||||
</Text>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fw={"bold"}
|
||||
fz={"1.5rem"}
|
||||
>
|
||||
Olahraga dan Kepemudaan
|
||||
</Text>
|
||||
</Box>
|
||||
<Image src="/api/img/prestasi-voli.jpeg" alt='' w={"100%"} />
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Selamat kepada Tim Bola Voli Putri Dharma Temaja yang berhasil meraih juara 3 dalam Turnamen Bola Voli Mangupura Cup 2024 kategori Putri Se-Bali.
|
||||
Perjuangan luar biasa yang ditunjukkan oleh tim ini merupakan bukti nyata kerja keras, kekompakan, dan semangat pantang menyerah. Dalam kompetisi yang diikuti oleh tim-tim terbaik dari seluruh Bali, Tim Dharma Temaja berhasil menunjukkan performa yang menginspirasi dan mengharumkan nama desa.
|
||||
</Text>
|
||||
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Terima kasih kepada seluruh pemain, pelatih, serta pendukung yang selalu memberikan dukungan penuh di setiap pertandingan. Kemenangan ini adalah awal dari perjalanan yang lebih besar, dan semoga prestasi ini dapat terus memotivasi kita untuk mencapai hasil yang lebih gemilang di masa depan.
|
||||
</Text>
|
||||
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
|
||||
Mari kita terus dukung Tim Bola Voli Putri Dharma Temaja agar semakin bersinar di ajang-ajang berikutnya
|
||||
</Text>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz={'md'}>25 May 2021 . Darmasaba</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandFacebook color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandInstagram color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandTwitter color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
<ActionIcon variant='transparent'>
|
||||
<IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider color={colors["blue-button"]} pb={50} />
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
147
src/app/darmasaba/(tambahan)/prestasi-desa/[id]/page.tsx
Normal file
147
src/app/darmasaba/(tambahan)/prestasi-desa/[id]/page.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
|
||||
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import colors from '@/con/colors';
|
||||
import { ActionIcon, Box, Container, Divider, Flex, Image, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
|
||||
import { useParams, usePathname } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
function Page() {
|
||||
const params = useParams();
|
||||
const pathname = usePathname();
|
||||
const [baseUrl, setBaseUrl] = useState('');
|
||||
const state = useProxy(prestasiState.prestasiDesa);
|
||||
|
||||
// Get base URL for sharing
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
setBaseUrl(window.location.origin);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
prestasiState.kategoriPrestasi.findMany.load()
|
||||
const loadData = async () => {
|
||||
try {
|
||||
await state.findMany.load();
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
state.findUnique.load(params?.id as string);
|
||||
}, [params?.id]);
|
||||
|
||||
if (!state.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10} px={{ base: "md", md: 100 }}>
|
||||
<Skeleton h={40} />
|
||||
<Skeleton h={300} mt="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
<Container w={{ base: "100%", md: "50%" }}>
|
||||
{state.findUnique.data && (
|
||||
<>
|
||||
<Box pb={20} key={state.findUnique.data.id}>
|
||||
<Text
|
||||
ta={"center"}
|
||||
fz={{base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem"}}
|
||||
c={colors["blue-button"]}
|
||||
fw={"bold"}
|
||||
>
|
||||
{state.findUnique.data.name}
|
||||
</Text>
|
||||
<Text ta={"center"} fw={"bold"} fz={"1.5rem"}>
|
||||
{state.findUnique.data.kategori?.name}
|
||||
</Text>
|
||||
</Box>
|
||||
{state.findUnique.data.image?.link && (
|
||||
<Image
|
||||
src={state.findUnique.data.image.link}
|
||||
alt={state.findUnique.data.name || 'Prestasi'}
|
||||
w={"100%"}
|
||||
style={{ maxHeight: '500px', objectFit: 'cover' }}
|
||||
/>
|
||||
)}
|
||||
<Box mt="md">
|
||||
<Text dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi || '' }} />
|
||||
<Text mt="md" c="dimmed" size="sm">
|
||||
Dibuat pada: {new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID')}
|
||||
</Text>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
<Box px={{ base: "md", md: 100 }}>
|
||||
<Divider color={colors["blue-button"]} />
|
||||
<Flex justify={"space-between"} py={20}>
|
||||
<Text fz="md">
|
||||
Dibuat pada: {state.findUnique.data?.createdAt ? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
}) : '-'}
|
||||
</Text>
|
||||
<Box>
|
||||
<Flex gap={"lg"}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
component="a"
|
||||
href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Share on Facebook"
|
||||
>
|
||||
<IconBrandFacebook color={colors["blue-button"]} size={30} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
component="a"
|
||||
href={`https://www.instagram.com/?url=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Share on Instagram"
|
||||
>
|
||||
<IconBrandInstagram color={colors["blue-button"]} size={30} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
component="a"
|
||||
href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Share on Twitter"
|
||||
>
|
||||
<IconBrandTwitter color={colors["blue-button"]} size={30} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
component="a"
|
||||
href={`https://wa.me/?text=${encodeURIComponent(`${baseUrl}${pathname}`)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Share on WhatsApp"
|
||||
>
|
||||
<IconBrandWhatsapp color={colors["blue-button"]} size={30} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Divider color={colors["blue-button"]} pb={50} />
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,34 +1,36 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { BackgroundImage, Box, Button, Container, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
|
||||
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 { useProxy } from 'valtio/utils';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Olahraga dan Kepemudaan",
|
||||
description: "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",
|
||||
description: "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",
|
||||
description: "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 Page() {
|
||||
const state = useProxy(prestasiState.prestasiDesa);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [prestasiData, setPrestasiData] = useState<any[]>([]);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await prestasiState.kategoriPrestasi.findMany.load();
|
||||
await state.findMany.load();
|
||||
setPrestasiData(state.findMany.data || []);
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
|
||||
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
|
||||
@@ -48,12 +50,17 @@ function Page() {
|
||||
md: 3,
|
||||
}}
|
||||
>
|
||||
{data.map((v, k) => {
|
||||
return (
|
||||
<BackgroundImage
|
||||
key={k}
|
||||
src={v.image}
|
||||
h={350}
|
||||
{loading ? (
|
||||
<Center>
|
||||
<Text fz={"2.4rem"}>Memuat Data...</Text>
|
||||
</Center>
|
||||
) : (
|
||||
prestasiData.map((v, k) => {
|
||||
return (
|
||||
<BackgroundImage
|
||||
key={k}
|
||||
src={v.image?.link}
|
||||
|
||||
radius={16}
|
||||
pos={"relative"}
|
||||
>
|
||||
@@ -70,7 +77,7 @@ function Page() {
|
||||
<Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
|
||||
<Group>
|
||||
<Paper radius={"lg"} py={7} px={10}>
|
||||
<Text>{v.title}</Text>
|
||||
<Text>{v.kategori?.name}</Text>
|
||||
</Paper>
|
||||
</Group>
|
||||
<Box p={"lg"}>
|
||||
@@ -80,18 +87,27 @@ function Page() {
|
||||
size={"1.8rem"}
|
||||
style={{
|
||||
textAlign: "center",
|
||||
}}>{v.description}</Text>
|
||||
lineHeight: 1.4,
|
||||
minHeight: '5.4rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
lineClamp={3}
|
||||
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
|
||||
/>
|
||||
</Box>
|
||||
<Group justify="center">
|
||||
<Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
|
||||
onClick={() => router.push(v.link)}>
|
||||
onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)}>
|
||||
Detail
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</BackgroundImage>
|
||||
)
|
||||
})}
|
||||
})
|
||||
)}
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user