feat: Show all members, add cat mascot & fix: LearnBasics.jsx

src/function/sleep.js

@@ -0,0 +1,3 @@
+const sleep = delay => new Promise(resolve => setTimeout(resolve, delay * 1000))
+
+export default sleep

src/pages/Member.jsx

@@ -2,7 +2,7 @@ import Petinggi from "../partials/member/Petinggi.jsx"
 import AnimatedPage from "../partials/animation/AnimatedPage.jsx"
 import GenSwitch from "../partials/member/GenSwitch.jsx"
 import {useSearchParams} from "react-router-dom"
-import {useState} from "react"
+import {useEffect, useState} from "react"
 import Struktur from "../partials/member/Struktur.jsx"
 import Gen12 from "../partials/member/Gen12.jsx"
 import Gen13 from "../partials/member/Gen13.jsx"
@@ -14,6 +14,14 @@ export default function Member() {
     window.history.replaceState({}, '', `/member?gen=${gen}`)
     setGen(gen)
   }
+
+  useEffect(() => {
+    const genParam = parseInt(query.get('gen'))
+    if (genParam !== 12 && genParam !== 13) {
+      setGen(13)
+      window.history.replaceState({}, '', '/member?gen=13')
+    }
+  }, [query])
 
   return (
     <AnimatedPage bgColor='#CECECE'>

src/partials/core/Footer.jsx

@@ -1,10 +1,13 @@
 // import FooterAnimation from "./FooterAnimation.jsx";
 
+import MaskotKucing from "./MaskotKucing.jsx";
+
 export default function Footer() {
   return (
     <>
       {/*<FooterAnimation />*/}
-      <footer>
+      <footer className='position-relative'>
+        <MaskotKucing />
         <p>Social</p>
         <hr className="bg-white"/>
         <p>Copyright© SBK 2024</p>

src/partials/core/MaskotKucing.jsx

@@ -0,0 +1,26 @@
+import {useEffect, useState} from "react";
+import sleep from "../../function/sleep.js";
+
+export default function MaskotKucing() {
+  const [mripat, setMripat] = useState('melek')
+  async function kedep() {
+    while (true) {
+      await sleep(2)
+      setMripat('merem')
+      await sleep(1)
+      setMripat('melek')
+      await sleep(0.5)
+      setMripat('merem')
+      await sleep(0.25)
+      setMripat('melek')
+    }
+  }
+  useEffect(() => {
+    kedep()
+  }, [])
+  return <img src={`/pictures/kucing-${mripat}.png`} alt="MaskotKucing" style={{
+    position: 'absolute',
+    top: '-65%',
+    right: '5%'
+  }}/>
+}

src/partials/main/LearnBasics.jsx

@@ -2,9 +2,8 @@ export default function LearnBasics() {
   return (
     <div className="container grid-center position-relative">
       <img src="/pictures/cache-1.png" alt="Konten"/>
-      <div className="csb-1">
-        <div className="d-grid grid-1">
-          <div className="text mt-0 bg-2">
+        <div className="csb-1 d-grid grid-1">
+          <div className="text mt-0 ps-5 pt-1">
             <h1 className="title fw-semibold">learn basics</h1>
             <p className="text-white mt-1">
               Belajar dasar jaringan dengan materi yang praktis dan interaktif
@@ -14,7 +13,6 @@ export default function LearnBasics() {
             <a href="#" className="play"/>
           </div>
         </div>
-      </div>
     </div>
   )
 }

src/partials/member/Gen12.jsx

@@ -28,19 +28,60 @@ export default function Gen12() {
       <StrukturalCard
         jabatan='Lab Barat'
         members={[
-
+          {
+            nama: 'Kholid Husam Habibullah',
+            panggilan: 'kholid'
+          }, {
+            nama: 'Ghozi Matta Alfaruq',
+            panggilan: 'ghozi'
+          }, {
+            nama: 'Mujadid Jundi Fauzi',
+            panggilan: 'jundi'
+          }, {
+            nama: 'Qonita Firdausi'
+          }, {
+            nama: 'Annisa Nurul ‘Aini'
+          }
         ]}
       />
       <StrukturalCard
         jabatan='Lab Tengah'
         members={[
-
+          {
+            nama: 'Muhammad Syaif Alfatih',
+            panggilan: 'syaif'
+          }, {
+            nama: 'Roshan Muhammad Arfan',
+            panggilan: 'roshan'
+          }, {
+            nama: 'Dzakiyyatunnisa Fara Atikah',
+          }, {
+            nama: 'Asyifa Salsabila'
+          }, {
+            nama: 'Siti Rismawati'
+          }
         ]}
+        ikhwan={2}
       />
       <StrukturalCard
         jabatan='Lab Timur'
         members={[
-
+          {
+            nama: 'Imam Irsyad Ma’ruf',
+            panggilan: 'imam'
+          }, {
+            nama: 'Arqian Hamzah',
+            panggilan: 'hamzah'
+          }, {
+            nama: 'Gavra Darius Ulul Albab',
+            panggilan: 'gavra'
+          }, {
+            nama: 'Nayla Nur Hidayah'
+          }, {
+            nama: 'Khaylila As Saudah Ramadhani'
+          }, {
+            nama: 'Anjani Arizkawati'
+          }
         ]}
       />
       <StrukturalCard
@@ -60,5 +101,5 @@ export default function Gen12() {
         ]}
       />
     </>
-  )
+  );
 }

src/partials/member/Gen13.jsx

@@ -85,7 +85,18 @@ export default function Gen13() {
       <StrukturalCard
         jabatan='Logistik'
         members={[
-
+          {
+            nama: 'Ghozi Matta Alfaruq',
+            panggilan: 'ghozi'
+          }, {
+            nama: 'Muhammad Hafiq Fairul Anam'
+          }, {
+            nama: 'Muhammad Rifa Rizqullah'
+          }, {
+            nama: 'Fatimah Syafawani'
+          }, {
+            nama: 'Khaylila As Saudah Ramadhani'
+          }
         ]}
       />
     </>

src/partials/member/struktur/ManyMembersContainer.jsx

@@ -0,0 +1,3 @@
+export default function ManyMembersContainer({children}) {
+  return <div className='d-flex flex-column gap-2'>{children}</div>
+    }

src/partials/member/struktur/Member.jsx

@@ -0,0 +1,8 @@
+export default function Member({member = {nama: '', panggilan: ''}}) {
+  return (
+    <div className='d-flex flex-column align-items-center gap-2'>
+      <img src={`pictures/member/${member.panggilan || 'grey'}.png`} alt={member.nama}/>
+      <p className='mt-1'>{member.nama}</p>
+    </div>
+  )
+}

src/partials/member/struktur/MemberImageContainer.jsx

@@ -0,0 +1,3 @@
+export default function MemberImageContainer({children, justifyContent}) {
+  return <div className={`d-flex justify-content-${justifyContent} w-100`}>{children}</div>
+}

src/partials/member/struktur/StrukturalCard.jsx

@@ -1,31 +1,55 @@
 import style from "../../../stylesheet/member.module.css";
+import MemberImageContainer from "./MemberImageContainer.jsx";
+import Member from "./Member.jsx";
+import ManyMembersContainer from "./ManyMembersContainer.jsx";
+import TwoMembersFromManyContainer from "./TwoMembersFromManyContainer.jsx";
+import {useEffect} from "react";
 
-export default function StrukturalCard({jabatan = '', members = []}) {
+export default function StrukturalCard({jabatan = '', members = [], ikhwan = 3}) {
+  let countNumber = 0
   const few = members.length < 5
   let justifyContent;
   switch (members.length) {
     case 1:
       justifyContent = 'center'
       break
-    case 2:
-      justifyContent = 'around'
+    case 4:
+      justifyContent = 'evenly'
       break
     default:
-      justifyContent = 'evenly'
+      justifyContent = 'around'
+  }
+  const getMemberDiv = (count, from) => {
+    if (typeof count === 'number') {
+      let divs = []
+      count = typeof from !== 'undefined' ? count + from : count
+      for (let i = from || 0; i < count; i++) {
+        divs.push(typeof members[i] !== 'undefined' ? <Member key={i} member={members[i]}/> : <Member />)
+        countNumber++
+      }
+      return divs
+    } else {
+      return members.map((member, index) => <Member member={member} key={index}/>)
+    }
   }
+  useEffect(() => console.log(members.length), [members])
   return (
     <div className={`${style.card} d-flex flex-column align-items-center gap-2 pt-2 mt-4`}>
       <h1 className={style.title}>{jabatan}</h1>
-      <div className={`d-flex justify-content-${justifyContent} w-100`}>
-        {few ? members.map((member, index) =>
-          <div key={index} className='d-flex flex-column align-items-center gap-2'>
-            <img src={`pictures/member/${member.panggilan || 'grey'}.png`} alt={member.nama}/>
-            <p className='mt-1'>{member.nama}</p>
-          </div>
-        ) : <div>
-
-        </div>}
-      </div>
+      <MemberImageContainer justifyContent={justifyContent}>
+        {few ? getMemberDiv('all') : (
+          <>
+            <ManyMembersContainer>
+              <TwoMembersFromManyContainer>{getMemberDiv(2)}</TwoMembersFromManyContainer>
+              {ikhwan === 3 && members.length === 5 || members.length === 6 ? getMemberDiv(1, countNumber) : <Member />}
+            </ManyMembersContainer>
+            <ManyMembersContainer>
+              {getMemberDiv(1, countNumber)}
+              <TwoMembersFromManyContainer>{getMemberDiv(2, countNumber)}</TwoMembersFromManyContainer>
+            </ManyMembersContainer>
+          </>
+        )}
+      </MemberImageContainer>
     </div>
   )
 }

src/partials/member/struktur/TwoMembersFromManyContainer.jsx

@@ -0,0 +1,3 @@
+export default function TwoMembersFromManyContainer({children}) {
+  return <div className='d-flex' style={{gap: '10vw'}}>{children}</div>
+}

src/stylesheet/index.css

@@ -233,7 +233,8 @@
 
 .grid-1 {
     grid-template-areas: 'text' 'icon';
-    grid-template-columns: 80% 20%;
+    grid-template-columns: 62% 20%;
+    gap: 18%;
     margin-top: 13vw;
     margin-bottom: 1.3vw;
     z-index: 1;
@@ -250,12 +251,19 @@
     }
 
     & .icon {
-        width: 120px;
-        height: 96px;
+        width: 100px;
+        border-radius: 8px;
     }
 
     .text {
         height: 96px;
+        border-radius: 0 16px 16px 0;
+        text-shadow: 4px 4px 8px rgba(0, 0, 0, .5);
+        background-color: rgba(90, 173, 215, .75);
+        & > p {
+            font-size: 14px;
+            font-weight: 300;
+        }
     }
 }
 
@@ -264,7 +272,6 @@
     left: 12.5vw;
     bottom: 8vw;
     width: 70%;
-    padding: 0 3vw;
 }
 
 .grid-1 > .icon {