wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix Konsisten teks di tampilan mobile dan desktop

Browse Source 
Fix QC Kak Inno tgl 10 Des
Fix QC Kak Ayu tgl 10 Des
This commit is contained in:
nico
2025-12-11 17:58:03 +08:00
parent 242ea86f77
commit a00481152c
43 changed files with 1725 additions and 1093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/darmasaba/(pages)/desa/profil/ui/maskotDesa.tsx
View File

@@ -2,7 +2,7 @@
'use client'
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text } from '@mantine/core';
import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text, Title } from '@mantine/core';
import { IconPhoto } from '@tabler/icons-react';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
@@ -21,7 +21,9 @@ function MaskotDesa() {
<Center mih={500}>
<Stack align="center" gap="sm">
<Loader size="lg" color="blue" />
<Text c="dimmed" fz="sm">Sedang memuat data maskot desa...</Text>
<Text c="dimmed" fz={{ base: 'xs', md: 'sm' }}>
Sedang memuat data maskot desa...
</Text>
</Stack>
</Center>
);
@@ -31,8 +33,21 @@ function MaskotDesa() {
<Box>
<Stack align="center" gap="xl">
<Stack align="center" gap={10}>
<Image src="/pudak-icon.png" alt="Ikon Desa" w={{ base: 160, md: 240 }} loading="lazy"/>
<Text c={colors['blue-button']} ta="center" fw={700} fz={{ base: 28, md: 36 }}>Maskot Desa</Text>
<Image
src="/pudak-icon.png"
alt="Ikon Desa"
w={{ base: 160, md: 240 }}
loading="lazy"
/>
{/* Page Title */}
<Title
order={1}
ta="center"
c={colors['blue-button']}
>
Maskot Desa
</Title>
</Stack>
<Paper
@@ -42,48 +57,60 @@ function MaskotDesa() {
withBorder
style={{ background: 'linear-gradient(145deg, #ffffff, #f8f9fa)' }}
>
{/* Body Description */}
<Text
fz={{ base: 'sm', md: 'lg' }}
lh={1.7}
ta="justify"
c="dark"
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
/>
<Group justify="center" gap="lg" mt="lg">
{data.images.length > 0 ? (
data.images.map((img, index) => (
<Card
<Card
key={index}
radius="lg"
shadow="md"
withBorder
w={220}
p="sm"
style={{
transition: 'transform 200ms ease, box-shadow 200ms ease',
}}
className="hover:scale-105 hover:shadow-lg"
radius="lg"
shadow="md"
withBorder
w={220}
p="sm"
style={{
transition: 'transform 200ms ease, box-shadow 200ms ease',
}}
className="hover:scale-105 hover:shadow-lg"
>
<Image
src={img.image.link}
alt={img.label}
w="100%"
h={200}
fit="cover"
radius="md"
loading="lazy"
/>
{/* Image Label */}
<Text
ta="center"
mt="sm"
fw={600}
fz={{ base: 'xs', md: 'sm' }}
c="dark"
>
<Image
src={img.image.link}
alt={img.label}
w="100%"
h={200}
fit="cover"
radius="md"
loading="lazy"
/>
<Text ta="center" mt="sm" fw={600} fz="sm" c="dark">
{img.label}
</Text>
</Card>
{img.label}
</Text>
</Card>
))
) : (
<Stack align="center" gap="xs" mt="lg">
<IconPhoto size={48} stroke={1.5} color="gray" />
<Text c="dimmed" fz="sm">Belum ada gambar maskot yang ditambahkan</Text>
<Text c="dimmed" fz={{ base: 'xs', md: 'sm' }}>
Belum ada gambar maskot yang ditambahkan
</Text>
</Stack>
)}
</Group>