97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
'use client'
|
|
import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
|
|
import colors from '@/con/colors';
|
|
import { Box, Center, Group, Image, Loader, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
|
import { useShallowEffect } from '@mantine/hooks';
|
|
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
|
import { useParams } from 'next/navigation';
|
|
import { useProxy } from 'valtio/utils';
|
|
import BackButton from '../../../desa/layanan/_com/BackButto';
|
|
|
|
function Page() {
|
|
const state = useProxy(programKesehatan)
|
|
const params = useParams()
|
|
|
|
useShallowEffect(() => {
|
|
state.findUnique.load(params.id as string)
|
|
}, [params.id])
|
|
|
|
if (!state.findUnique.data) {
|
|
return (
|
|
<Center mih="60vh">
|
|
<Stack align="center" gap="sm">
|
|
<Loader color={colors["blue-button"]} size="lg" />
|
|
<Text c="dimmed" fz="sm">Memuat data program kesehatan...</Text>
|
|
</Stack>
|
|
</Center>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<BackButton />
|
|
</Box>
|
|
<Paper
|
|
px={{ base: 'md', md: 100 }}
|
|
py="xl"
|
|
radius="xl"
|
|
shadow="md"
|
|
bg={colors["white-trans-1"]}
|
|
>
|
|
<Stack gap="lg">
|
|
<Center>
|
|
{state.findUnique.data.image?.link ? (
|
|
<Image
|
|
radius="xl"
|
|
src={state.findUnique.data.image?.link}
|
|
alt={state.findUnique.data.name}
|
|
w="100%"
|
|
maw={800}
|
|
fit="cover"
|
|
/>
|
|
) : (
|
|
<Skeleton h={300} w="100%" radius="xl" />
|
|
)}
|
|
</Center>
|
|
<Box>
|
|
<Text pb="sm" c={colors["blue-button"]} fw="bold" fz={{ base: 24, md: 32 }} lh={1.2}>
|
|
{state.findUnique.data.name}
|
|
</Text>
|
|
<Text
|
|
ta="justify"
|
|
fz="md"
|
|
lh={1.6}
|
|
dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi }}
|
|
/>
|
|
</Box>
|
|
<Group gap="xl">
|
|
<Group gap="xs">
|
|
<Tooltip label="Tanggal dibuat" withArrow>
|
|
<IconCalendar size={20} stroke={1.5} />
|
|
</Tooltip>
|
|
<Text size="sm" c="dimmed">
|
|
{state.findUnique.data.createdAt
|
|
? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
})
|
|
: 'Tanggal tidak tersedia'}
|
|
</Text>
|
|
</Group>
|
|
<Group gap="xs">
|
|
<Tooltip label="Dibuat oleh" withArrow>
|
|
<IconUser size={20} stroke={1.5} />
|
|
</Tooltip>
|
|
<Text size="sm" c="dimmed">Admin Desa</Text>
|
|
</Group>
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Page;
|