102 lines
4.7 KiB
TypeScript
102 lines
4.7 KiB
TypeScript
'use client'
|
|
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
|
|
import colors from '@/con/colors';
|
|
import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge } from '@mantine/core';
|
|
import { useShallowEffect } from '@mantine/hooks';
|
|
import { useProxy } from 'valtio/utils';
|
|
import { IconMapPin, IconCalendarTime, IconBook2 } from '@tabler/icons-react';
|
|
import BackButton from '../../desa/layanan/_com/BackButto';
|
|
|
|
function Page() {
|
|
const stateTujuanProgram = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
|
|
const stateLokasiDanJadwal = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
|
|
const stateFasilitas = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
|
|
|
|
useShallowEffect(() => {
|
|
stateTujuanProgram.findById.load('edit');
|
|
stateLokasiDanJadwal.findById.load('edit');
|
|
stateFasilitas.findById.load('edit');
|
|
}, []);
|
|
|
|
if (!stateTujuanProgram.findById.data || !stateLokasiDanJadwal.findById.data || !stateFasilitas.findById.data)
|
|
return (
|
|
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<BackButton />
|
|
</Box>
|
|
<Box px={{ base: 'md', md: 100 }} pb={50}>
|
|
<Skeleton h={60} radius="xl" />
|
|
<Skeleton h={200} mt="lg" radius="md" />
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
|
|
return (
|
|
<Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
|
|
<Box px={{ base: 'md', md: 100 }}>
|
|
<BackButton />
|
|
</Box>
|
|
<Box px={{ base: 'md', md: 120 }} pb={80}>
|
|
<Box mb="lg">
|
|
<Title ta="center" order={1} fw="bold" c={colors['blue-button']} fz={{ base: 28, md: 38 }}>
|
|
Program Bimbingan Belajar Desa
|
|
</Title>
|
|
<Divider size="sm" my="md" mx="auto" w="60%" color={colors['blue-button']} />
|
|
<Text ta="center" fz="lg" c="black" px={{ base: 'sm', md: 120 }}>
|
|
Program unggulan untuk mendukung siswa Desa Darmasaba memahami pelajaran sekolah, meningkatkan prestasi akademik, dan menumbuhkan semangat belajar sejak dini.
|
|
</Text>
|
|
</Box>
|
|
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl">
|
|
<Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
|
|
<Stack gap="sm">
|
|
<Box>
|
|
<Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
|
|
Tujuan Program
|
|
</Badge>
|
|
<Tooltip label="Gambaran manfaat utama program" position="top-start" withArrow>
|
|
<Box>
|
|
<IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
|
|
</Box>
|
|
</Tooltip>
|
|
</Box>
|
|
<Text fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
|
|
</Stack>
|
|
</Paper>
|
|
<Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
|
|
<Stack gap="sm">
|
|
<Box>
|
|
<Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
|
|
Lokasi & Jadwal
|
|
</Badge>
|
|
<Tooltip label="Tempat dan waktu pelaksanaan" position="top-start" withArrow>
|
|
<Box>
|
|
<IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
|
|
</Box>
|
|
</Tooltip>
|
|
</Box>
|
|
<Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
|
|
</Stack>
|
|
</Paper>
|
|
<Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
|
|
<Stack gap="sm">
|
|
<Box>
|
|
<Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
|
|
Fasilitas
|
|
</Badge>
|
|
<Tooltip label="Sarana yang disediakan untuk peserta" position="top-start" withArrow>
|
|
<Box>
|
|
<IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
|
|
</Box>
|
|
</Tooltip>
|
|
</Box>
|
|
<Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
|
|
</Stack>
|
|
</Paper>
|
|
</SimpleGrid>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
export default Page;
|