Fix QC Kak Inno Tgl 11 Des
Fix QC Kak Ayu Tgl 11 Des
Fix font style {font size, color, line height} menu kesehatan
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
'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 { Box, Center, Group, Image, Loader, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconCalendar, IconUser } from '@tabler/icons-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
@@ -9,12 +9,12 @@ import { useProxy } from 'valtio/utils';
|
||||
import BackButton from '../../../desa/layanan/_com/BackButto';
|
||||
|
||||
function Page() {
|
||||
const state = useProxy(programKesehatan)
|
||||
const params = useParams()
|
||||
const state = useProxy(programKesehatan);
|
||||
const params = useParams();
|
||||
|
||||
useShallowEffect(() => {
|
||||
state.findUnique.load(params.id as string)
|
||||
}, [params.id])
|
||||
state.findUnique.load(params.id as string);
|
||||
}, [params.id]);
|
||||
|
||||
if (!state.findUnique.data) {
|
||||
return (
|
||||
@@ -24,7 +24,7 @@ function Page() {
|
||||
<Text c="dimmed" fz="sm">Memuat data program kesehatan...</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -33,68 +33,73 @@ function Page() {
|
||||
<BackButton />
|
||||
</Box>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
<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"
|
||||
loading="lazy"
|
||||
<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
|
||||
src={state.findUnique.data.image?.link}
|
||||
alt={state.findUnique.data.name}
|
||||
radius="md"
|
||||
mah={300}
|
||||
fit="contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Skeleton h={300} w="100%" radius="xl" />
|
||||
)}
|
||||
</Center>
|
||||
<Box pl={20}>
|
||||
<Title
|
||||
order={1}
|
||||
pb="sm"
|
||||
c={colors["blue-button"]}
|
||||
fw="bold"
|
||||
lh={{ base: 1.2, md: 1.15 }}
|
||||
>
|
||||
{state.findUnique.data.name}
|
||||
</Title>
|
||||
<Text
|
||||
ta="justify"
|
||||
fz={{ base: 'sm', md: 'md' }}
|
||||
lh={{ base: 1.5, md: 1.6 }}
|
||||
dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi }}
|
||||
style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
|
||||
/>
|
||||
) : (
|
||||
<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 }}
|
||||
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
||||
/>
|
||||
</Box>
|
||||
<Group gap="xl">
|
||||
<Group gap="xs">
|
||||
<Tooltip label="Tanggal dibuat" withArrow>
|
||||
<IconCalendar color='gray' size={20} stroke={1.5} />
|
||||
</Tooltip>
|
||||
<Text size="sm" c="dimmed">
|
||||
{state.findUnique.data.createdAt
|
||||
? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
|
||||
</Box>
|
||||
<Group gap="xl">
|
||||
<Group gap="xs">
|
||||
<Tooltip label="Tanggal dibuat" withArrow>
|
||||
<IconCalendar color="gray" size={20} stroke={1.5} />
|
||||
</Tooltip>
|
||||
<Text fz={{ base: 'xs', md: '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>
|
||||
: 'Tanggal tidak tersedia'}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Tooltip label="Dibuat oleh" withArrow>
|
||||
<IconUser color="gray" size={20} stroke={1.5} />
|
||||
</Tooltip>
|
||||
<Text fz={{ base: 'xs', md: 'sm' }} c="dimmed">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<Tooltip label="Dibuat oleh" withArrow>
|
||||
<IconUser color='gray' size={20} stroke={1.5} />
|
||||
</Tooltip>
|
||||
<Text size="sm" c="dimmed">Admin Desa</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
export default Page;
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Transition
|
||||
} from "@mantine/core";
|
||||
import { useDebouncedValue, useShallowEffect } from "@mantine/hooks";
|
||||
@@ -57,7 +58,7 @@ export default function Page() {
|
||||
const state = useProxy(programKesehatan);
|
||||
const router = useRouter();
|
||||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
const { data, page, totalPages, loading, load } = state.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
@@ -80,14 +81,19 @@ export default function Page() {
|
||||
|
||||
<Grid px={{ base: "md", md: 100 }} align="center" gutter="lg">
|
||||
<GridCol span={{ base: 12, md: 8 }}>
|
||||
<Text
|
||||
fz={{ base: "2rem", md: "2.8rem" }}
|
||||
<Title
|
||||
order={1}
|
||||
c={colors["blue-button"]}
|
||||
fw="bold"
|
||||
fz={{ base: '28px', md: '32px' }}
|
||||
>
|
||||
Program Kesehatan Desa
|
||||
</Text>
|
||||
<Text fz="lg" mt="xs">
|
||||
</Title>
|
||||
<Text
|
||||
fz={{ base: '14px', md: '16px' }}
|
||||
lh={{ base: '1.5', md: '1.6' }}
|
||||
mt="xs"
|
||||
>
|
||||
Temukan berbagai program kesehatan untuk mendukung kualitas hidup
|
||||
masyarakat Darmasaba.
|
||||
</Text>
|
||||
@@ -129,11 +135,9 @@ export default function Page() {
|
||||
<Box
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 180, // 🔥 tinggi fix biar semua seragam
|
||||
aspectRatio: '16/9', // thumbnail landscape aman untuk portrait/landscape
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
backgroundColor: '#f0f2f5', // fallback kalau gambar loading
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
@@ -142,32 +146,28 @@ export default function Page() {
|
||||
fit="cover"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ objectFit: 'cover', objectPosition: 'center' }}
|
||||
loading="lazy"
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center',
|
||||
transition: 'transform 0.4s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
</Center>
|
||||
|
||||
<Box px="lg" pb="lg">
|
||||
<Text
|
||||
fw="bold"
|
||||
fz="xl"
|
||||
<Title
|
||||
order={3}
|
||||
c={colors["blue-button"]}
|
||||
fw="bold"
|
||||
fz={{ base: '18px', md: '20px' }}
|
||||
mb="xs"
|
||||
>
|
||||
{v.name}
|
||||
</Text>
|
||||
</Title>
|
||||
<Text
|
||||
fz="sm"
|
||||
ta={"justify"}
|
||||
fz={{ base: '13px', md: '14px' }}
|
||||
lh="1.6"
|
||||
ta="justify"
|
||||
lineClamp={3}
|
||||
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
@@ -175,7 +175,10 @@ export default function Page() {
|
||||
<Group justify="space-between" mt="md">
|
||||
<Group gap="xs">
|
||||
<IconCalendar size={18} />
|
||||
<Text size="sm">
|
||||
<Text
|
||||
fz={{ base: '12px', md: '14px' }}
|
||||
lh="1.5"
|
||||
>
|
||||
{v.createdAt
|
||||
? new Date(v.createdAt).toLocaleDateString(
|
||||
"id-ID",
|
||||
@@ -190,25 +193,30 @@ export default function Page() {
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<IconUser size={18} />
|
||||
<Text size="sm">Admin Desa</Text>
|
||||
<Text
|
||||
fz={{ base: '12px', md: '14px' }}
|
||||
lh="1.5"
|
||||
>
|
||||
Admin Desa
|
||||
</Text>
|
||||
</Group>
|
||||
</Group>
|
||||
<Button
|
||||
mt="lg"
|
||||
fullWidth
|
||||
radius="lg"
|
||||
size="md"
|
||||
fw="bold"
|
||||
variant="gradient"
|
||||
gradient={{ from: colors["blue-button"], to: "#4dabf7" }}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/darmasaba/kesehatan/program-kesehatan/${v.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
<Button
|
||||
mt="lg"
|
||||
fullWidth
|
||||
radius="lg"
|
||||
size="md"
|
||||
fw="bold"
|
||||
variant="gradient"
|
||||
gradient={{ from: colors["blue-button"], to: "#4dabf7" }}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/darmasaba/kesehatan/program-kesehatan/${v.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
Lihat Detail
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
@@ -239,14 +247,19 @@ export default function Page() {
|
||||
|
||||
<Box px={{ base: "md", md: 100 }} py="xl">
|
||||
<Stack gap="sm" mb="lg">
|
||||
<Text
|
||||
fz={{ base: "2rem", md: "2.5rem" }}
|
||||
<Title
|
||||
order={2}
|
||||
c={colors["blue-button"]}
|
||||
fw="bold"
|
||||
fz={{ base: '24px', md: '28px' }}
|
||||
>
|
||||
Manfaat Program Kesehatan
|
||||
</Text>
|
||||
<Text fz="lg" maw={700}>
|
||||
</Title>
|
||||
<Text
|
||||
fz={{ base: '14px', md: '16px' }}
|
||||
lh={{ base: '1.5', md: '1.6' }}
|
||||
maw={700}
|
||||
>
|
||||
Program kesehatan Desa Darmasaba berperan penting dalam meningkatkan
|
||||
kesejahteraan dan kualitas hidup warganya.
|
||||
</Text>
|
||||
@@ -273,10 +286,20 @@ export default function Page() {
|
||||
>
|
||||
<Center>{v.icon}</Center>
|
||||
</Paper>
|
||||
<Text ta="center" fw="bold" fz="xl" c={colors["blue-button"]}>
|
||||
<Title
|
||||
order={3}
|
||||
ta="center"
|
||||
fw="bold"
|
||||
c={colors["blue-button"]}
|
||||
fz={{ base: '18px', md: '20px' }}
|
||||
>
|
||||
{v.title}
|
||||
</Text>
|
||||
<Text ta="center" fz="sm">
|
||||
</Title>
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '13px', md: '14px' }}
|
||||
lh="1.5"
|
||||
>
|
||||
{v.desc}
|
||||
</Text>
|
||||
</Stack>
|
||||
@@ -286,4 +309,4 @@ export default function Page() {
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user