Update: navbar padding & card koordinator for showing details

UKM-Programming-UMDP · Nov 15, 2024 · ba686d5 · ba686d5
1 parent 29f3260
commit ba686d5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@headlessui/react": "^2.1.10",
     "aos": "^2.3.4",
+    "clsx": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",

diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
@@ -1,27 +1,58 @@
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import useWindowSize from "../../common/hooks/useWindowSize";
-
+import clsx from "clsx";
 export const Grid = ({ array, ketuaPosition }) => {
   const { md } = useWindowSize();
+  const [clickedAnggota, setClickedAnggota] = useState([]);
+
+  const handleShowDetail = (id) => {
+    console.log(id);
+    console.log(clickedAnggota);
+    setClickedAnggota((prev) => {
+      if (prev.indexOf(id) !== -1) {
+        return prev.filter((a) => a !== id);
+      } else {
+        return [...prev, id];
+      }
+    });
+  };
 
+  //const information = use
   const ketuaComponent = (array) => (
     <div
-      className="p-3 md:w-1/2 w-full rounded-3xl row-span-3 bg-dark-blue border-dark-blue border-8 text-center text-2xl font-semibold bg-cover bg-center flex items-end justify-center"
+      className={clsx(
+        "md:w-1/2 w-full rounded-3xl row-span-3 bg-dark-blue border-dark-blue border-8 text-center text-2xl font-semibold bg-cover bg-center flex items-end justify-center"
+    )}
       style={{
         backgroundImage: `url(${array.image})`,
         aspectRatio: array.anggota.length === 2 ? "0.5 / 1" : "1 / 1",
       }}
-      data-aos="fade-up"
-      data-aos-duration="600"
+      data-aos="fade-right"
+      data-aos-duration="700"
+      data-aos-delay="50"
+      onClick={() => handleShowDetail(array.name)}
     >
-      <span
-        className="md:text-3xl text-4xl"
-        style={{
-          WebkitTextStroke: "0.8px #000",
-        }}
-      >
-        {array.name}
-      </span>
+      {clickedAnggota.indexOf(array.name) !== -1 && (
+        <div className={`p-4 text-center flex flex-col justify-center items-center bg-dark h-full w-full bg-gray-950/[.7]`  }>
+        <p
+          className="md:text-5xl text-l"
+          style={{
+            WebkitTextStroke: "0.8px #000",
+          }}
+        >
+         {array.name}
+        </p>
+        <p
+          className="text-base"
+          style={{
+            WebkitTextStroke: "0.8px #000",
+          }}
+        >
+          Koordinator {array.divisi}
+        </p>
+      </div>
+
+      )}
     </div>
   );
 
@@ -32,26 +63,40 @@ export const Grid = ({ array, ketuaPosition }) => {
         className={`md:w-1/2 w-full grid gap-3 ${
           anggotaCount === 2 ? "row-span-4" : "row-span-3"
         } grid-cols-1 text-white`}
-        data-aos="fade-up"
-        data-aos-duration="800"
       >
         {array?.anggota.map((anggota, idx) => (
           <div
             key={idx}
-            className="p-1 rounded-3xl bg-dark-blue border-8 bg-cover text-center border-dark-blue text-xl font-semibold flex items-end justify-center"
+            className="rounded-3xl bg-dark-blue border-8 bg-cover text-center border-dark-blue text-xl font-semibold flex items-end justify-center"
             style={{
               backgroundImage: `url(${anggota?.image})`,
               aspectRatio: "1 / 0.99",
             }}
+            data-aos="fade-left"
+            data-aos-duration={600 * idx}
+            data-aos-delay="100"
+            onClick={() => handleShowDetail(anggota.name)}
           >
-            <span
-              className="md:text-2xl text-l"
-              style={{
-                WebkitTextStroke: "0.8px #000",
-              }}
-            >
-              {anggota.name}
-            </span>
+            {clickedAnggota.indexOf(anggota.name) !== -1 && (
+               <div className={`p-4 text-center flex flex-col justify-center items-center bg-dark h-full w-full bg-gray-950/[.7]`  }>
+                <p
+                  className="md:text-4xl text-l"
+                  style={{
+                    WebkitTextStroke: "0.8px #000",
+                  }}
+                >
+                 {anggota.name}
+                </p>
+                <p
+                  className="text-base"
+                  style={{
+                    WebkitTextStroke: "0.8px #000",
+                  }}
+                >
+                  Anggota {anggota.divisi}
+                </p>
+              </div>
+            )}
           </div>
         ))}
       </div>

diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
@@ -14,8 +14,8 @@ export const Navbar = () => {
   };
 
   return (
-    <nav className="bg-dark-blue fixed w-full shadow-lg z-50">
-      <div className="container lg:p-0 ps-5 pe-5 mx-auto flex items-center justify-between relative">
+    <nav className="bg-dark-blue fixed w-full ps-10 pe-10 shadow-lg z-50">
+      <div className="container mx-auto flex items-center justify-between">
         <a className="flex-shrink-0" href="#">
           <img src={img} width="100px" alt="logo" />
         </a>

diff --git a/src/views/about/koordinator.jsx b/src/views/about/koordinator.jsx
@@ -16,9 +16,9 @@ export const Koordinator = () => {
       </h1>
       <div className="overflow-hidden grid gap-y-32 w-full max-w-screen-lg mx-auto sm:px-12">
         <Grid array={dataKoor.koorPsdm} ketuaPosition="left" />
-        <Grid array={dataKoor.koorSosial} ketuaPosition="right" />
+        <Grid array={dataKoor.koorSosial}  />
+        <Grid array={dataKoor.koorHumas} ketuaPosition="right" />
         <Grid array={dataKoor.koorMulmed} />
-        <Grid array={dataKoor.koorHumas} />
       </div>
     </section>
   );