UI Dashboard Darmasaba

2025-03-12 13:53:46 +08:00
parent 61e855bd0f
commit 3324b930ef
20 changed files with 779 additions and 107 deletions
--- a/src/app/darmasaba/_com/main-page/desaantikorupsi/FlipScroll.tsx
+++ b/src/app/darmasaba/_com/main-page/desaantikorupsi/FlipScroll.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { Image } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+
+const FlipOnScroll = () => {
+  // Menggunakan hook useScroll untuk mendeteksi posisi scroll
+  const { scrollYProgress } = useScroll();
+
+  // Menggunakan useTransform untuk mengubah nilai scroll menjadi rotasi
+  const rotate = useTransform(scrollYProgress, [0, 1], [10, 360 * 1]); // Rotasi dari 0 hingga 360 derajat
+
+  useShallowEffect(() => {
+    rotate.on("change", (latest) => {
+      console.log(latest)
+    })
+  }, [])
+  return (
+    <div style={{ backgroundColor: "gray", padding: "50px" }}>
+      <h1>Scroll ke bawah untuk melihat animasi flip</h1>
+
+      <motion.div
+        style={{
+          width: "500px",
+          height: "500px",
+          backgroundColor: "blue",
+          borderRadius: "10px",
+
+        }}
+      >
+        <Image src={"https://awsimages.detik.net.id/community/media/visual/2023/04/14/gambar-pemandangan-6_169.jpeg?w=1200"} alt="a" />
+      </motion.div>
+
+    </div>
+  );
+};
+
+export default FlipOnScroll;
--- a/src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
+++ b/src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
@@ -0,0 +1,89 @@
+"use client";
+import colors from "@/con/colors";
+import { Box, Button, Center, Container, Flex, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { IconClipboardText } from "@tabler/icons-react";
+import { motion } from "motion/react";
+
+function DesaAntiKorupsi() {
+  const data = [
+    {
+      judul: "PENGUATAN TATA LAKSANA",
+      deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+      icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
+    },
+    {
+      judul: "PENGUATAN TATA LAKSANA",
+      deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+      icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
+    },
+    {
+      judul: "PENGUATAN TATA LAKSANA",
+      deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+      icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
+    },
+    {
+      judul: "PENGUATAN TATA LAKSANA",
+      deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+      icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
+    },
+    {
+      judul: "PENGUATAN TATA LAKSANA",
+      deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+      icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
+    },
+    {
+      judul: "PENGUATAN TATA LAKSANA",
+      deskripsi: "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+      icon: <IconClipboardText size={180} color={colors["blue-button"]} />,
+    },
+  ]
+const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  return (
+    <Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1150}>
+      <Container w={{ base: "100%", md: "80%" }} p={"xl"} >
+        <Center>
+          <Text fz={"3.4rem"}>Desa Anti Korupsi</Text>
+        </Center>
+        <Text ta={"center"} fz={"1.4rem"}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
+      </Container>
+        <SimpleGrid
+          pt={50}
+          cols={{
+            base: 1,
+            sm: 2,
+
+          }}>
+          {data.map((v, k) => {
+            return (
+              <motion.div
+                key={k}
+
+                whileTap={{ scale: 0.8 }}
+              >
+                <Paper p={"lg"} >
+                  <Flex gap={"lg"} justify={"center"} align={"center"}>
+                    <Box >
+                      <Text fz={"lg"} ta={"center"} c={colors["blue-button"]}>{v.judul}</Text>
+                      <Flex gap={"lg"} justify={"center"} align={"center"}>
+                        {v.icon}
+                        <Box>
+                          <Text fz={"sm"} ta={"justify"}>{v.deskripsi}</Text>
+                          <Box pt={10}>
+                            <Button bg={colors["blue-button"]} radius={"lg"}>Download</Button>
+                          </Box>
+                        </Box>
+                      </Flex>
+                    </Box>
+                  </Flex>
+                </Paper>
+              </motion.div>
+            )
+          })}
+        </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default DesaAntiKorupsi;