Fix semua tulisan profile jadi profil, mulai dari navbar, dan route

2025-12-10 14:16:15 +08:00
parent ac2fc1a705
commit 99c2c9c6d7
31 changed files with 146 additions and 83 deletions
--- a/src/app/darmasaba/(pages)/desa/profil/ui/maskotDesa.tsx
+++ b/src/app/darmasaba/(pages)/desa/profil/ui/maskotDesa.tsx
@@ -0,0 +1,96 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'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 { IconPhoto } from '@tabler/icons-react';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function MaskotDesa() {
+  const state = useProxy(stateProfileDesa.maskotDesa);
+
+  useEffect(() => {
+    state.findUnique.load('edit');
+  }, []);
+
+  const { data, loading } = state.findUnique;
+
+  if (loading || !data) {
+    return (
+      <Center mih={500}>
+        <Stack align="center" gap="sm">
+          <Loader size="lg" color="blue" />
+          <Text c="dimmed" fz="sm">Sedang memuat data maskot desa...</Text>
+        </Stack>
+      </Center>
+    );
+  }
+
+  return (
+    <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>
+        </Stack>
+
+        <Paper
+          p={{ base: 'md', md: 'xl' }}
+          radius="lg"
+          shadow="sm"
+          withBorder
+          style={{ background: 'linear-gradient(145deg, #ffffff, #f8f9fa)' }}
+        >
+          <Text
+            fz={{ base: 'sm', md: 'lg' }}
+            lh={1.7}
+            ta="justify"
+            c="dark"
+            dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+            style={{wordBreak: "break-word", whiteSpace: "normal"}}
+          />
+
+          <Group justify="center" gap="lg" mt="lg">
+            {data.images.length > 0 ? (
+              data.images.map((img, index) => (
+                  <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"
+                  >
+                    <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>
+              ))
+            ) : (
+              <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>
+              </Stack>
+            )}
+          </Group>
+        </Paper>
+      </Stack>
+    </Box>
+  );
+}
+
+export default MaskotDesa;