Sinkronisasi Admin dan User, Menu Landing Page, Submenu Potensi

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

@@ -1,20 +1,19 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 import stateLayananDesa from "@/app/admin/(dashboard)/_state/desa/layananDesa";
 import colors from "@/con/colors";
-import ApiFetch from "@/lib/api-fetch";
 import { Carousel } from "@mantine/carousel";
 import {
- Box,
- Button,
- Container,
- Divider,
- Group,
- Paper,
- Stack,
- Text,
- useMantineTheme
+  Box,
+  Button,
+  Container,
+  Divider,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  useMantineTheme
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import Autoplay from "embla-carousel-autoplay";
@@ -22,7 +21,6 @@ import _ from "lodash";
 import { useTransitionRouter } from "next-view-transitions";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
-import useSWR from "swr";
 import { useProxy } from "valtio/utils";
 
 const textHeading = {
@@ -30,15 +28,6 @@ const textHeading = {
  des: "Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!",
 };
 function Layanan() {
- const { data, isLoading } = useSWR(
-   "/",
-   (url) => ApiFetch.api.layanan.get().then(({ data }) => data?.data),
-   {
-     fallbackData: [],
-   }
- );
-
- const router = useTransitionRouter()
 
  return (
    <Stack pos={"relative"} bg={colors.grey[1]} gap={"42"} py={"xl"}>
@@ -125,7 +114,7 @@ function Slider() {
            </Text>
          </Box>
          <Group justify="center">
-           <Button component={Link} href={`/darmasaba/desa/layanan/${item.id}`} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+           <Button onClick={()=> router.push(`/darmasaba/desa/layanan/${item.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
              Detail
            </Button>
          </Group>
@@ -135,19 +124,25 @@ function Slider() {
  ));
 
  return (
-   <Carousel
-     plugins={[autoplay.current]}
-     onMouseEnter={autoplay.current.stop}
-     onMouseLeave={autoplay.current.reset}
-     height={height}
-     slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
-     slideGap={{ base: "xl", sm: "md" }}
-     loop
-     align="start"
-     slidesToScroll={mobile ? 1 : 2}
-   >
-     {slides}
-   </Carousel>
+  <Box>
+   {loading ? (
+    <Skeleton height={height} />
+   ) : (
+    <Carousel
+      plugins={[autoplay.current]}
+      onMouseEnter={autoplay.current.stop}
+      onMouseLeave={autoplay.current.reset}
+      height={height}
+      slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
+      slideGap={{ base: "xl", sm: "md" }}
+      loop
+      align="start"
+      slidesToScroll={mobile ? 1 : 2}
+    >
+      {slides}
+    </Carousel>
+   )}
+  </Box>
  );
 }