132 lines
5.1 KiB
TypeScript
132 lines
5.1 KiB
TypeScript
'use client'
|
|
import jadwalkegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
|
|
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
|
|
import colors from '@/con/colors';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Divider,
|
|
Group,
|
|
Modal,
|
|
Paper,
|
|
Skeleton,
|
|
Stack,
|
|
Text
|
|
} from '@mantine/core';
|
|
import { useDisclosure, useShallowEffect } from '@mantine/hooks';
|
|
import { IconMail, IconPhone, IconUser } from '@tabler/icons-react';
|
|
import { useParams } from 'next/navigation';
|
|
import { useProxy } from 'valtio/utils';
|
|
import CreatePendaftaran from '../create/page';
|
|
|
|
|
|
function Page() {
|
|
const params = useParams();
|
|
const state = useProxy(jadwalkegiatanState);
|
|
const [opened, { open, close }] = useDisclosure(false);
|
|
|
|
useShallowEffect(() => {
|
|
state.findUnique.load(params?.id as string);
|
|
}, []);
|
|
|
|
|
|
|
|
if (!state.findUnique.data) {
|
|
return (
|
|
<Stack py="xl" px="lg">
|
|
<Skeleton h={500} radius="lg" />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<BackButton />
|
|
</Box>
|
|
<Box px={{ base: "md", md: 100 }}>
|
|
<Stack gap="lg">
|
|
<Paper radius="xl" shadow="md">
|
|
<Box
|
|
style={{ borderTopLeftRadius: 16, borderTopRightRadius: 16 }}
|
|
bg={colors['blue-button']}
|
|
>
|
|
<Text p="md" fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw="bold">
|
|
Detail & Pendaftaran Kegiatan
|
|
</Text>
|
|
</Box>
|
|
<Box p="lg">
|
|
<Stack gap="xl">
|
|
<Stack gap="sm">
|
|
<Text fz="lg" fw="bold">Informasi Kegiatan</Text>
|
|
<Divider />
|
|
<Text fz="md" fw="bold">Nama Kegiatan: <Text span>{state.findUnique.data.informasijadwalkegiatan.name}</Text></Text>
|
|
<Text fz="md" fw="bold">Tanggal: <Text span>{state.findUnique.data.informasijadwalkegiatan.tanggal}</Text></Text>
|
|
<Text fz="md" fw="bold">Waktu: <Text span>{state.findUnique.data.informasijadwalkegiatan.waktu}</Text></Text>
|
|
<Text fz="md" fw="bold">Lokasi: <Text span>{state.findUnique.data.informasijadwalkegiatan.lokasi}</Text></Text>
|
|
</Stack>
|
|
|
|
<Stack gap="sm">
|
|
<Text fz="lg" fw="bold">Deskripsi Kegiatan</Text>
|
|
<Divider />
|
|
<Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
|
|
</Stack>
|
|
|
|
<Stack gap="sm">
|
|
<Text fz="lg" fw="bold">Layanan yang Tersedia</Text>
|
|
<Divider />
|
|
<Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
|
|
</Stack>
|
|
|
|
<Stack gap="sm">
|
|
<Text fz="lg" fw="bold">Syarat & Ketentuan</Text>
|
|
<Divider />
|
|
<Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
|
|
</Stack>
|
|
|
|
<Stack gap="sm">
|
|
<Text fz="lg" fw="bold">Dokumen yang Perlu Dibawa</Text>
|
|
<Divider />
|
|
<Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
|
|
</Stack>
|
|
|
|
<Stack gap="sm">
|
|
<Text fz="lg" fw="bold">Pendaftaran Kegiatan</Text>
|
|
<Divider />
|
|
<Group>
|
|
<Button onClick={open}>Buat Pendaftaran</Button>
|
|
</Group>
|
|
</Stack>
|
|
|
|
<Modal opened={opened} onClose={close}>
|
|
<CreatePendaftaran />
|
|
</Modal>
|
|
|
|
<Paper p="lg" radius="md" bg={colors['blue-button-trans']} shadow="sm">
|
|
<Stack gap="xs">
|
|
<Text fz="lg" c={colors['white-1']} fw="bold">Informasi Kontak</Text>
|
|
<Group gap="xs">
|
|
<IconUser size={18} color="white" />
|
|
<Text fz="md" c={colors['white-1']}>Penanggung Jawab: <Text span fw="bold">Bidan Komang Ayu</Text></Text>
|
|
</Group>
|
|
<Group gap="xs">
|
|
<IconPhone size={18} color="white" />
|
|
<Text fz="md" c={colors['white-1']}>081234567890</Text>
|
|
</Group>
|
|
<Group gap="xs">
|
|
<IconMail size={18} color="white" />
|
|
<Text fz="md" c={colors['white-1']}>puskesmasabiansemal3@gmail.com</Text>
|
|
</Group>
|
|
</Stack>
|
|
</Paper>
|
|
</Stack>
|
|
</Box>
|
|
</Paper>
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Page;
|