Sinkronisasi UI & API Admin - User Submenu Penghargaan

src/app/darmasaba/_com/main-page/penghargaan/index.tsx

@@ -1,10 +1,32 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+import penghargaanState from "@/app/admin/(dashboard)/_state/desa/penghargaan";
 import colors from "@/con/colors";
 import { Stack, Box, Container, Button, Text } from "@mantine/core";
 import { useTransitionRouter } from 'next-view-transitions'
+import { useEffect, useState } from "react";
+import { useProxy } from "valtio/utils";
 
 function Penghargaan() {
   const router = useTransitionRouter()
+  const state = useProxy(penghargaanState)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true)
+        await state.findMany.load()
+      } catch (error) {
+        console.error('Error loading data:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadData()
+  }, [])
+
+  const data = state.findMany.data?.slice(0, 3)
   return (
     <Stack pos={"relative"} h={720}>
       <video
@@ -44,17 +66,30 @@ function Penghargaan() {
             >
               Penghargaan
             </Text>
-            <Stack align="center" gap={0}>
-              <Text fz={"1.4rem"} c={"white"}>
-                Juara 2 Lomba Video Pendek
+            {loading ? (
+              <Text
+                style={{
+                  textAlign: "center",
+                }}
+                fw={"bold"}
+                fz={"2.4rem"}
+                c={"white"}
+              >
+                Memuat Data...
               </Text>
-              <Text fz={"1.4rem"} c={"white"}>
-                Juara 2 Duta Investasi
-              </Text>
-              <Text fz={"1.2rem"} c={"white"}>
-                Juara Favorit Lomba Video Pendek
-              </Text>
-            </Stack>
+            ) : (
+              data?.map((v, k) => {
+                return (
+                  <Box key={k}>
+                    <Stack align="center" gap={0}>
+                      <Text fz={"1.4rem"} c={"white"}>
+                        {v.name}
+                      </Text>
+                    </Stack>
+                  </Box>
+                );
+              })
+            )}
             <Button color={colors["blue-button"]} onClick={() => router.push("/darmasaba/penghargaan")} variant="white" radius={100}>
               Selanjutnya
             </Button>