handling loading + slicing kuis page

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ksuli-sibi",
       "version": "0.0.0",
       "dependencies": {
+        "@fontsource/poppins": "^5.1.1",
         "@mediapipe/tasks-vision": "^0.10.14",
         "@tensorflow/tfjs": "^4.20.0",
         "clsx": "^2.1.1",
@@ -842,6 +843,12 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fontsource/poppins": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.1.1.tgz",
+      "integrity": "sha512-PQVKHGQOK+UpVNPzTFF9Z9ez3CIDkunfvRXGH95hiDoqWJc1shW4JFqe4tEoqnq7RtZaYrw9aWQq58L4eny5xg==",
+      "license": "OFL-1.1"
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/poppins": "^5.1.1",
     "@mediapipe/tasks-vision": "^0.10.14",
     "@tensorflow/tfjs": "^4.20.0",
     "clsx": "^2.1.1",

src/App.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { Route, Routes } from "react-router-dom";
 import myRoute from "./routes/routes";
+import MyLoading from "./components/organisms/MyLoading";
 
 const App = () => {
   return (
@@ -11,7 +12,7 @@ const App = () => {
             key={index}
             path={route.path}
             element={
-              <Suspense fallback={<div>Loading...</div>}>
+              <Suspense fallback={<MyLoading />}>
                 <route.component />
               </Suspense>
             }

src/components/molecules/NavLink.tsx

@@ -1,6 +1,4 @@
 import { cn } from "@/lib/utils";
-import { Link } from "react-router-dom";
-
 type NavLinkProps = {
   href: string;
   name: string;
@@ -9,7 +7,7 @@ type NavLinkProps = {
 
 const NavLink = ({ href, name, isActive }: NavLinkProps) => {
   return (
-    <Link to={href}>
+    <a href={href}>
       <li
         className={cn(
           "btn bg-transparent border-none",
@@ -18,7 +16,7 @@ const NavLink = ({ href, name, isActive }: NavLinkProps) => {
       >
         {name}
       </li>
-    </Link>
+    </a>
   );
 };
 

src/components/organisms/HeaderPage.tsx

@@ -8,7 +8,7 @@ const HeaderPage = () => {
   const navStore = useNavbarStore();
   return (
     <div className="bg-white drop-shadow w-full h-fit sticky top-0 z-[300]">
-      <header className="flex flex-row items-center gap-2 justify-between px-4 py-3 container max-w-[1200px]">
+      <header className="flex flex-row items-center gap-2 justify-between px-4 py-3 container max-w-[960px]">
         <div className="flex gap-1 items-center">
           <img
             className="w-10"
@@ -17,7 +17,7 @@ const HeaderPage = () => {
           />
           <div className="form-control">
             <h1 className="font-semibold">K-SULI</h1>
-            <p className="text-primary">Kedai Susu Tuli</p>
+            <p className="text-primary text-sm">Kedai Susu Tuli</p>
           </div>
         </div>
         <ul

src/components/organisms/MyLoading.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const MyLoading: React.FC = () => {
+    return (
+        <div className="flex flex-col items-center justify-center h-screen">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-primary"></div>
+            <p className="mt-4 text-lg text-gray-700">Loading...</p>
+        </div>
+    );
+};
+
+export default MyLoading;

src/components/templates/LayoutPage.tsx

@@ -4,9 +4,9 @@ import FooterPage from "../organisms/FooterPage";
 
 const LayoutPage = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-col min-h-svh bg-ground">
+    <div className="flex flex-col min-h-svh bg-white font-poppins">
       <HeaderPage />
-      <main className="flex flex-col flex-1 container max-w-[1200px]">
+      <main className="flex flex-col flex-1 container max-w-[960px]">
         {children}
       </main>
       <FooterPage />

src/helper/MediapipeHelper.ts

@@ -42,13 +42,13 @@ class MediapipeHelper {
 
   detectHands = async () => {
     if (this.videoRef.current === null) {
-      console.error("Video is not initialized.");
+    //   console.error("Video is not initialized.");
       return;
     }
 
     if (this.videoRef && this.videoRef.current.readyState >= 2) {
       if (!this.handLandmarker) {
-        console.error("HandLandmarker is not initialized.");
+        // console.error("HandLandmarker is not initialized.");
         return;
       }
       const detections = this.handLandmarker.detectForVideo(
@@ -86,7 +86,6 @@ class MediapipeHelper {
       }
       
     }
-    requestAnimationFrame(this.detectHands);
   };
 }
 

src/index.css

@@ -1,3 +1,4 @@
+@import "@fontsource/poppins";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,4 +7,5 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  @apply font-poppins;
 }

src/pages/Home.tsx

@@ -4,6 +4,7 @@ import { FaCircleCheck } from "react-icons/fa6";
 import useNavbarStore from "@/stores/NavbarStore";
 import MediapipeHelper from "@/helper/MediapipeHelper";
 import DetectionHelper from "@/helper/DetectionHelper";
+import MyLoading from "@/components/organisms/MyLoading";
 
 type PredictResult = {
   abjad: String;
@@ -23,13 +24,18 @@ const Home = () => {
   const [handPresence, setHandPresence] = useState(false);
 
   const onHandDetected = async () => {
+    if (!mediapipeHelper || !detectionHelper) {
+      return;
+    }
+
+    mediapipeHelper.detectHands();
+
     const result = mediapipeHelper.getResult();
     if (result.handPresence) {
       // console.log("Hand Detected");
       setHandPresence(true);
 
       const predict = await detectionHelper.makePrediction(result.finalResult);
-      console.log(predict);
 
       if (predict) {
         setResultPredict((prevState) => ({
@@ -37,7 +43,6 @@ const Home = () => {
           ...predict,
         }));
       }
-      
     } else {
       setHandPresence(false);
     }
@@ -51,25 +56,20 @@ const Home = () => {
         video: true,
       });
 
+      setLoadCamera(true);
+
       if (videoRef.current) {
         videoRef.current.srcObject = stream;
-      }
-
         mediapipeHelper = new MediapipeHelper(videoRef);
         detectionHelper = new DetectionHelper();
+      }
 
       onHandDetected();
-      
-      
-      
     } catch (error) {
       console.error("Error accessing webcam:", error);
     }
-
-    
   };
 
-  
   const store = useNavbarStore();
   let mediapipeHelper: MediapipeHelper;
   let detectionHelper: DetectionHelper;
@@ -79,12 +79,14 @@ const Home = () => {
 
     startWebcam();
 
-    setLoadCamera(true);
-
-    
-
     return () => {
-     
+      if (videoRef.current) {
+        (videoRef.current.srcObject as MediaStream)
+          ?.getTracks()
+          .forEach((track) => {
+            track.stop();
+          });
+      }
     };
   }, []);
 
@@ -113,7 +115,10 @@ const Home = () => {
             ></video>
           </div>
         ) : (
-          <div>Loading...</div>
+          <div className="flex flex-col items-center justify-center flex-1">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-primary"></div>
+            <p className="mt-4 text-lg text-gray-700">Loading...</p>
+          </div>
         )}
       </div>
     </LayoutPage>

src/pages/Kuis.tsx

@@ -11,14 +11,35 @@ const Kuis = () => {
   return (
     <LayoutPage>
       <div className="flex flex-col flex-1 py-4">
-        <h1 className="font-semibold">Kuis SIBI</h1>
+        <h1 className="font-semibold text-3xl">Ayoo Kuiss</h1>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-6">
+        <p>Be the first!</p>
-          
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-24 md:gap-6 mt-24 md:mt-52 h-full mb-12">
+          <div className="relative ">
+            <img
+              className="absolute w-24 -top-12 left-4 md:left-12"
+              src="/assets/images/tebak-huruf.png"
+              alt="Tebak Huruf"
+            />
+            <div className="flex flex-col w-full bg-[#7FAFEF] hover:bg-[#6290cc] rounded-md px-4 md:px-12 py-6 pb-12 text-white pt-32 duration-300">
+              <h1 className="font-semibold text-4xl">Tebak Huruf</h1>
+              <p>Tebak huruf dan coba simulasikan</p>
+            </div>
+          </div>
+          <div className="relative ">
+            <img
+              className="absolute w-42 -top-12 left-4 md:left-12"
+              src="/assets/images/menyusun-huruf.png"
+              alt="Menyusun Huruf"
+            />
+            <div className="flex flex-col w-full bg-[#FF6884] hover:bg-[#d3546b] rounded-md px-4 md:px-12 py-6 pb-12 text-white pt-32 duration-300">
+              <h1 className="font-semibold text-4xl">Menyusun Huruf</h1>
+              <p>Susun huruf jadi kata yang tepat</p>
+            </div>
+          </div>
         </div>
       </div>
     </LayoutPage>
   );
 };
 
-
 export default Kuis;

tailwind.config.js

@@ -3,6 +3,9 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        poppins: ["Poppins", "sans-serif"],
+      },
       container: {
         center: true,
         padding: "1rem",