feat: detail kamus

src/constant/constantKamus.ts

@@ -0,0 +1,153 @@
+export interface constantKamusType {
+  id: number;
+  abjad: string;
+  keterangan: string;
+  badge: string[];
+}
+
+export const constantKamus: constantKamusType[] = [
+  {
+    id: 1,
+    abjad: "a",
+    keterangan: `Huruf "A" dalam bahasa isyarat SIBI diwakili dengan tangan mengepal, di mana jempol menempel pada sisi telunjuk. Gerakan ini statis tanpa perubahan posisi tangan.`,
+    badge: ["Mudah", "Statis"],
+  },
+  {
+    id: 2,
+    abjad: "b",
+    keterangan: `Huruf "B" dalam SIBI diwakili dengan tangan terbuka, jari-jari rapat dan ibu jari menempel pada telapak tangan. Posisi tetap dan jelas terlihat.`,
+    badge: ["Mudah", "Terbuka"],
+  },
+  {
+    id: 3,
+    abjad: "c",
+    keterangan: `Huruf "C" dalam SIBI ditunjukkan dengan tangan membentuk huruf "C", jari-jari melengkung ke depan dengan ibu jari menopang.`,
+    badge: ["Menengah", "Melengkung"],
+  },
+  {
+    id: 4,
+    abjad: "d",
+    keterangan: `Huruf "D" dalam SIBI diwakili dengan jari telunjuk tegak lurus ke atas, sementara jari lainnya mengepal. Gerakan ini sangat khas dan mudah dikenali.`,
+    badge: ["Mudah", "Tegak Lurus"],
+  },
+  {
+    id: 5,
+    abjad: "e",
+    keterangan: `Huruf "E" ditunjukkan dengan jari-jari melipat ke dalam dan ibu jari menekan jari-jari lainnya. Gerakan ini statis dan tidak memerlukan pergerakan tangan.`,
+    badge: ["Mudah", "Statis"],
+  },
+  {
+    id: 6,
+    abjad: "f",
+    keterangan: `Huruf "F" dalam SIBI terbentuk dengan jari telunjuk dan ibu jari membuat lingkaran, sementara jari-jari lainnya tetap tegak.`,
+    badge: ["Menengah", "Simbolik"],
+  },
+  {
+    id: 7,
+    abjad: "g",
+    keterangan: `Huruf "G" dalam SIBI menyerupai bentuk "L" dengan jari telunjuk dan ibu jari, sedangkan jari lainnya tetap mengepal.`,
+    badge: ["Menengah", "Horizontal"],
+  },
+  {
+    id: 8,
+    abjad: "h",
+    keterangan: `Huruf "H" terbentuk dengan jari telunjuk dan jari tengah lurus ke depan, sedangkan jari lainnya mengepal. Posisi ini harus jelas agar tidak tertukar dengan huruf lain.`,
+    badge: ["Menengah", "Dua Jari"],
+  },
+  {
+    id: 9,
+    abjad: "i",
+    keterangan: `Huruf "I" dalam SIBI menggunakan jari kelingking yang tegak lurus ke atas, sementara jari lainnya mengepal. Ini adalah bentuk yang sederhana dan mudah diingat.`,
+    badge: ["Mudah", "Satu Jari"],
+  },
+  {
+    id: 10,
+    abjad: "k",
+    keterangan: `Huruf "K" terbentuk dengan jari telunjuk dan jari tengah tegak membentuk huruf "V", dengan ibu jari menopang di bagian bawah.`,
+    badge: ["Menengah", "Dua Jari"],
+  },
+  {
+    id: 11,
+    abjad: "l",
+    keterangan: `Huruf "L" dalam SIBI ditunjukkan dengan jari telunjuk tegak dan ibu jari membentuk sudut 90 derajat.`,
+    badge: ["Mudah", "Tegak Lurus"],
+  },
+  {
+    id: 12,
+    abjad: "m",
+    keterangan: `Huruf "M" dibuat dengan jari telunjuk, jari tengah, dan jari manis menutup ibu jari, sedangkan jari kelingking tetap terlipat.`,
+    badge: ["Menengah", "Tiga Jari"],
+  },
+  {
+    id: 13,
+    abjad: "n",
+    keterangan: `Huruf "N" menyerupai "M", tetapi hanya dua jari yang menutup ibu jari.`,
+    badge: ["Menengah", "Dua Jari"],
+  },
+  {
+    id: 14,
+    abjad: "o",
+    keterangan: `Huruf "O" dalam SIBI ditunjukkan dengan jari-jari membentuk lingkaran bersama ibu jari.`,
+    badge: ["Mudah", "Lingkaran"],
+  },
+  {
+    id: 15,
+    abjad: "p",
+    keterangan: `Huruf "P" dalam SIBI serupa dengan "K", tetapi posisinya miring ke bawah.`,
+    badge: ["Menengah", "Miring"],
+  },
+  {
+    id: 16,
+    abjad: "q",
+    keterangan: `Huruf "Q" mirip dengan "G" tetapi mengarah ke bawah.`,
+    badge: ["Menengah", "Miring"],
+  },
+  {
+    id: 17,
+    abjad: "r",
+    keterangan: `Huruf "R" terbentuk dengan jari telunjuk dan jari tengah yang saling bersilangan.`,
+    badge: ["Sulit", "Silang"],
+  },
+  {
+    id: 18,
+    abjad: "s",
+    keterangan: `Huruf "S" dalam SIBI diwakili dengan tangan mengepal, ibu jari berada di depan jari lainnya.`,
+    badge: ["Mudah", "Kepalan"],
+  },
+  {
+    id: 19,
+    abjad: "t",
+    keterangan: `Huruf "T" ditunjukkan dengan jari telunjuk melingkari ibu jari.`,
+    badge: ["Mudah", "Satu Jari"],
+  },
+  {
+    id: 20,
+    abjad: "u",
+    keterangan: `Huruf "U" menggunakan jari telunjuk dan jari tengah tegak, tetapi merapat.`,
+    badge: ["Mudah", "Dua Jari"],
+  },
+  {
+    id: 21,
+    abjad: "v",
+    keterangan: `Huruf "V" terbentuk dengan jari telunjuk dan jari tengah terbuka membentuk huruf "V".`,
+    badge: ["Mudah", "V-Shape"],
+  },
+  {
+    id: 22,
+    abjad: "w",
+    keterangan: `Huruf "W" dalam SIBI menggunakan tiga jari tegak lurus membentuk huruf "W".`,
+    badge: ["Menengah", "Tiga Jari"],
+  },
+  {
+    id: 23,
+    abjad: "x",
+    keterangan: `Huruf "X" dibentuk dengan jari telunjuk melengkung seperti kait.`,
+    badge: ["Menengah", "Melengkung"],
+  },
+  {
+    id: 24,
+    abjad: "y",
+    keterangan: `Huruf "Y" dalam SIBI menggunakan jari kelingking dan ibu jari terbuka membentuk huruf "Y".`,
+    badge: ["Mudah", "Simbolik"],
+  },
+];

src/pages/Kamus.tsx

@@ -1,10 +1,14 @@
 import LayoutPage from "@/components/templates/LayoutPage";
 import useNavbarStore from "@/stores/NavbarStore";
-import { abjads } from "@/utils/ConvertResult";
+import { useEffect, useState } from "react";
-import { useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { IoCloseOutline } from "react-icons/io5";
+import { constantKamus, constantKamusType } from "@/constant/constantKamus";
 
 const Kamus = () => {
   const store = useNavbarStore();
+  const [showDialog, setShowDialog] = useState(false);
+  const [selectedKamus, setSelectedKamus] = useState<constantKamusType>();
 
   useEffect(() => {
     store.setNavSelected("kamus");
@@ -14,22 +18,93 @@ const Kamus = () => {
       <div className="flex flex-col flex-1 py-4">
         <h1 className="font-semibold">Kamus SIBI</h1>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-6">
-          {abjads.map((abjad, index) => (
+          {constantKamus.map((item, index) => (
             <CardKamus
+              handleClick={() => {
+                setSelectedKamus(item);
+                setShowDialog(true);
+              }}
               key={index}
-              title={`Abjad ${abjad.toLocaleUpperCase()}`}
+              title={`Abjad ${item.abjad.toUpperCase()}`}
-              image={`/assets/kamus/${abjad.toLocaleLowerCase()}.jpg`}
+              image={`/assets/kamus/${item.abjad}.jpg`}
             />
           ))}
         </div>
       </div>
+
+      <AnimatePresence>
+        {showDialog && (
+          <motion.div
+            className="fixed inset-0 bg-black bg-opacity-50 flex items-center z-[999] justify-center"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={(e) => {
+              if (e.target === e.currentTarget) {
+                setShowDialog(false);
+              }
+            }}
+          >
+            <motion.div
+              className="bg-white max-h-[90%] px-12 py-8 rounded-md flex flex-col max-w-[90%] md:min-w-[600px] md:max-w-[800px] w-full"
+              initial={{ scale: 0.5 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0.8 }}
+            >
+              <div className="flex gap-2 justify-between items-center pb-8">
+                <h1 className="font-semibold">
+                  Huruf {selectedKamus?.abjad.toUpperCase()}
+                </h1>
+                <button
+                  onClick={() => setShowDialog(false)}
+                  className="hover:bg-base-100 p-3 rounded-md"
+                >
+                  <IoCloseOutline />
+                </button>
+              </div>
+
+              <div className="flex flex-col md:flex-row gap-6 overflow-y-auto flex-1">
+                <div className="flex flex-col order-2 md:order-1">
+                  <p>{selectedKamus?.keterangan}</p>
+                  <div className="flex flex-wrap gap-2 mt-3">
+                    {selectedKamus?.badge.map((item, index) => (
+                      <span
+                        key={index}
+                        className="px-3 py-2 bg-primary rounded-md text-xs text-white"
+                      >
+                        {item}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <img
+                  className="h-[250px] object-cover rounded-md order-1 md:order-2"
+                  src={`/assets/kamus/${selectedKamus?.abjad}.jpg`}
+                  alt="Kamus SIBI"
+                />
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </LayoutPage>
   );
 };
 
-const CardKamus = ({ title, image }: { title: string; image: string }) => {
+const CardKamus = ({
+  title,
+  image,
+  handleClick,
+}: {
+  title: string;
+  image: string;
+  handleClick: () => void;
+}) => {
   return (
-    <div className="flex flex-col rounded-md bg-base-100 shadow-lg overflow-hidden">
+    <div
+      onClick={handleClick}
+      className="flex flex-col rounded-md bg-white hover:bg-base-100 cursor-pointer shadow-lg overflow-hidden"
+    >
       <img className="h-[250px] object-cover" src={image} alt="Kamus SIBI" />
       <div className="p-3 flex items-center justify-center font-semibold">
         <p>{title}</p>