tambahannya

src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx

@@ -0,0 +1,55 @@
+import images from "@/con/images";
+import { Center, Image, Paper, SimpleGrid } from "@mantine/core";
+import { motion } from 'framer-motion';
+import { useTransitionRouter } from 'next-view-transitions';
+
+
+const listImageModule = Object.values(images.module);
+
+function ModuleItem({ item }: { item: string }) {
+  const router = useTransitionRouter();
+  return (
+    <Paper
+      onClick={() => {
+        router.push(`/module/c`);
+      }}
+      p={"md"}
+      bg={"white"}
+      radius={"32"}
+      pos={"relative"}
+    >
+      <Center h={"100%"}>
+        <motion.div
+          whileHover={{ scale: 1.05 }}
+        >
+          <Image src={item} alt="icon"
+            fit="contain"
+            sizes="100%"
+            loading="lazy"
+            style={{
+              objectFit: "contain",
+              objectPosition: "center"
+            }}
+          />
+        </motion.div>
+      </Center>
+    </Paper>
+  );
+}
+
+function ModuleView() {
+  return (
+    <SimpleGrid
+      cols={{
+        base: 2,
+        md: 3,
+      }}
+    >
+      {listImageModule.map((item, k) => {
+        return <ModuleItem key={k} item={item} />;
+      })}
+    </SimpleGrid>
+  );
+}
+
+export default ModuleView;