118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
'use client'
|
|
import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
|
|
import { Box, Button, Paper, Skeleton, Stack, Text, ThemeIcon } from '@mantine/core';
|
|
import { useShallowEffect } from '@mantine/hooks';
|
|
import {
|
|
IconArrowLeft, IconChartLine, IconChristmasTreeFilled, IconClipboard,
|
|
IconHomeEco, IconLeaf, IconRecycle, IconScale,
|
|
IconShieldFilled, IconTent, IconTrash,
|
|
IconTrendingUp, IconTrophy, IconTruck
|
|
} from '@tabler/icons-react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import React from 'react';
|
|
import { useProxy } from 'valtio/utils';
|
|
|
|
function Page() {
|
|
const stateProgramPenghijauan = useProxy(programPenghijauanState);
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
|
|
const iconMap: Record<string, React.FC<any>> = {
|
|
ekowisata: IconLeaf,
|
|
kompetisi: IconTrophy,
|
|
wisata: IconTent,
|
|
ekonomi: IconChartLine,
|
|
sampah: IconRecycle,
|
|
truck: IconTruck,
|
|
scale: IconScale,
|
|
clipboard: IconClipboard,
|
|
trash: IconTrash,
|
|
lingkunganSehat: IconHomeEco,
|
|
sumberOksigen: IconChristmasTreeFilled,
|
|
ekonomiBerkelanjutan: IconTrendingUp,
|
|
mencegahBencana: IconShieldFilled,
|
|
};
|
|
|
|
useShallowEffect(() => {
|
|
stateProgramPenghijauan.findUnique.load(params?.id as string);
|
|
}, [params?.id]);
|
|
|
|
if (!stateProgramPenghijauan.findUnique.data) {
|
|
return (
|
|
<Stack py="xl" align="center">
|
|
<Skeleton height={300} radius="lg" w="100%" />
|
|
<Text c="dimmed" fz="sm">Sedang memuat detail program...</Text>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
const data = stateProgramPenghijauan.findUnique.data;
|
|
const IconComponent = data?.icon ? iconMap[data.icon] : null;
|
|
|
|
return (
|
|
<Box py="md" px={{ base: 'md', md: 100 }}>
|
|
<Button
|
|
variant="light"
|
|
color="blue"
|
|
onClick={() => router.back()}
|
|
leftSection={<IconArrowLeft size={20} />}
|
|
mb="lg"
|
|
radius="xl"
|
|
>
|
|
Kembali ke daftar
|
|
</Button>
|
|
|
|
<Paper
|
|
w={{ base: '100%', md: '75%' }}
|
|
mx="auto"
|
|
p="xl"
|
|
radius="xl"
|
|
shadow="md"
|
|
withBorder
|
|
>
|
|
<Stack gap="md" align="center" ta="center">
|
|
{IconComponent && (
|
|
<ThemeIcon
|
|
size={72}
|
|
radius="xl"
|
|
variant="light"
|
|
color="blue"
|
|
mb="sm"
|
|
style={{ boxShadow: '0 0 15px rgba(0, 123, 255, 0.3)' }}
|
|
>
|
|
<IconComponent size={40} />
|
|
</ThemeIcon>
|
|
)}
|
|
|
|
<Text fz="xl" fw={700} c="blue">
|
|
{data?.name || 'Nama program tidak tersedia'}
|
|
</Text>
|
|
|
|
<Text fz="lg" fw={600}>
|
|
{data?.judul || 'Judul belum tersedia'}
|
|
</Text>
|
|
|
|
<Box w="100%" mt="sm">
|
|
{data?.deskripsi ? (
|
|
<Text
|
|
fz="md"
|
|
lh={1.7}
|
|
ta="justify"
|
|
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
|
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
|
/>
|
|
) : (
|
|
<Text c="dimmed" fz="sm" ta="center">
|
|
Tidak ada deskripsi yang tersedia untuk program ini.
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default Page;
|