Merge pull request #8 from CUBS-sources-code/Member

fix: fill member section
CUBS-sources-code · Oct 3, 2024 · 576dd07 · 576dd07
2 parents e26acd3 + 2a7bc7c
commit 576dd07
Show file tree

Hide file tree

Showing 57 changed files with 10,103 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/members/Aim.jpeg b/src/assets/members/Aim.jpeg
diff --git a/src/assets/members/Amy.png b/src/assets/members/Amy.png
diff --git a/src/assets/members/Big.jpeg b/src/assets/members/Big.jpeg
diff --git a/src/assets/members/Bonus.jpeg b/src/assets/members/Bonus.jpeg
diff --git a/src/assets/members/Boss.jpeg b/src/assets/members/Boss.jpeg
diff --git a/src/assets/members/Brunei.jpeg b/src/assets/members/Brunei.jpeg
diff --git a/src/assets/members/Chega.jpeg b/src/assets/members/Chega.jpeg
diff --git a/src/assets/members/Earth.jpeg b/src/assets/members/Earth.jpeg
diff --git a/src/assets/members/Float.jpeg b/src/assets/members/Float.jpeg
diff --git a/src/assets/members/Green.jpeg b/src/assets/members/Green.jpeg
diff --git a/src/assets/members/Gundum.jpeg b/src/assets/members/Gundum.jpeg
diff --git a/src/assets/members/Jame.jpeg b/src/assets/members/Jame.jpeg
diff --git a/src/assets/members/Lin.jpeg b/src/assets/members/Lin.jpeg
diff --git a/src/assets/members/Meen.jpeg b/src/assets/members/Meen.jpeg
diff --git a/src/assets/members/Memee.jpeg b/src/assets/members/Memee.jpeg
diff --git a/src/assets/members/Neiy.jpeg b/src/assets/members/Neiy.jpeg
diff --git a/src/assets/members/Noon.jpeg b/src/assets/members/Noon.jpeg
diff --git a/src/assets/members/Ohm.jpeg b/src/assets/members/Ohm.jpeg
diff --git a/src/assets/members/Paeng.jpeg b/src/assets/members/Paeng.jpeg
diff --git a/src/assets/members/Pim.jpeg b/src/assets/members/Pim.jpeg
diff --git a/src/assets/members/Putter.jpeg b/src/assets/members/Putter.jpeg
diff --git a/src/assets/members/Rada.jpeg b/src/assets/members/Rada.jpeg
diff --git a/src/assets/members/Saint.jpeg b/src/assets/members/Saint.jpeg
diff --git a/src/assets/members/Sand.jpeg b/src/assets/members/Sand.jpeg
diff --git a/src/assets/members/Scott.jpg b/src/assets/members/Scott.jpg
diff --git a/src/assets/members/Sharp.jpeg b/src/assets/members/Sharp.jpeg
diff --git a/src/assets/members/Stamp.JPG b/src/assets/members/Stamp.JPG
diff --git a/src/assets/members/Titan.jpeg b/src/assets/members/Titan.jpeg
diff --git a/src/assets/members/Wawa.jpeg b/src/assets/members/Wawa.jpeg
diff --git a/src/assets/members/Yeekheng.jpeg b/src/assets/members/Yeekheng.jpeg
diff --git a/src/assets/members/กุ้งเต้น.jpeg b/src/assets/members/กุ้งเต้น.jpeg
diff --git a/src/assets/members/จั๊กจั่น.jpeg b/src/assets/members/จั๊กจั่น.jpeg
diff --git a/src/assets/members/จื้อ.jpeg b/src/assets/members/จื้อ.jpeg
diff --git a/src/assets/members/ตาต้า.jpg b/src/assets/members/ตาต้า.jpg
diff --git a/src/assets/members/ธิ.jpeg b/src/assets/members/ธิ.jpeg
diff --git a/src/assets/members/นิว.jpeg b/src/assets/members/นิว.jpeg
diff --git a/src/assets/members/บี.jpeg b/src/assets/members/บี.jpeg
diff --git a/src/assets/members/บีม.jpeg b/src/assets/members/บีม.jpeg
diff --git a/src/assets/members/บูม.jpeg b/src/assets/members/บูม.jpeg
diff --git a/src/assets/members/บ๊ะจ่าง.jpeg b/src/assets/members/บ๊ะจ่าง.jpeg
diff --git a/src/assets/members/ปัท.jpeg b/src/assets/members/ปัท.jpeg
diff --git a/src/assets/members/ปาร์ตี้.jpeg b/src/assets/members/ปาร์ตี้.jpeg
diff --git a/src/assets/members/พล.jpg b/src/assets/members/พล.jpg
diff --git a/src/assets/members/ฟอร์ด.jpeg b/src/assets/members/ฟอร์ด.jpeg
diff --git a/src/assets/members/มิ้น.jpeg b/src/assets/members/มิ้น.jpeg
diff --git a/src/assets/members/ลีโอ.jpeg b/src/assets/members/ลีโอ.jpeg
diff --git a/src/assets/members/วินเทอร์.jpeg b/src/assets/members/วินเทอร์.jpeg
diff --git a/src/assets/members/วี.jpg b/src/assets/members/วี.jpg
diff --git a/src/assets/members/สกาย.jpeg b/src/assets/members/สกาย.jpeg
diff --git a/src/assets/members/สตางค์.jpg b/src/assets/members/สตางค์.jpg
diff --git a/src/assets/members/สโนว์.jpeg b/src/assets/members/สโนว์.jpeg
diff --git a/src/assets/members/ออม.jpeg b/src/assets/members/ออม.jpeg
diff --git a/src/assets/members/เฟมมี่.jpeg b/src/assets/members/เฟมมี่.jpeg
diff --git a/src/assets/members/แตงโม.jpg b/src/assets/members/แตงโม.jpg
diff --git a/src/assets/members/แพท.png b/src/assets/members/แพท.png
diff --git a/src/components/Community/MemberBox.tsx b/src/components/Community/MemberBox.tsx
@@ -1,77 +1,138 @@
-import React from 'react';
+import Image from 'next/image';
+import Aim from "@/assets/members/Aim.jpeg";
+import Memee from "@/assets/members/Memee.jpeg";
+import Wawa from "@/assets/members/Wawa.jpeg";
+import Leo from "@/assets/members/ลีโอ.jpeg";
+import Amy from "@/assets/members/Amy.png";
+import Neiy from "@/assets/members/Neiy.jpeg";
+import Yeekheng from "@/assets/members/Yeekheng.jpeg";
+import Sky from "@/assets/members/สกาย.jpeg";
+import Big from "@/assets/members/Big.jpeg";
+import Noon from "@/assets/members/Noon.jpeg";
+import Thi from "@/assets/members/ธิ.jpeg";
+import Ford from "@/assets/members/ฟอร์ด.jpeg";
+import Bonus from "@/assets/members/Bonus.jpeg";
+import Ohm from "@/assets/members/Ohm.jpeg";
+import B from "@/assets/members/บี.jpeg";
+import Snow from "@/assets/members/สโนว์.jpeg";
+import Boss from "@/assets/members/Boss.jpeg";
+import Paeng from "@/assets/members/Paeng.jpeg";
+import Plon from "@/assets/members/พล.jpg";
+import Tata from "@/assets/members/ตาต้า.jpg";
+import Brunei from "@/assets/members/Brunei.jpeg";
+import Pim from "@/assets/members/Pim.jpeg";
+import V from "@/assets/members/วี.jpg";
+import Watermelon from "@/assets/members/แตงโม.jpg";
+import Chega from "@/assets/members/Chega.jpeg";
+import Putter from "@/assets/members/Putter.jpeg";
+import New from "@/assets/members/นิว.jpeg";
+import Femmy from "@/assets/members/เฟมมี่.jpeg";
+import Earth from "@/assets/members/Earth.jpeg";
+import Rada from "@/assets/members/Rada.jpeg";
+import Beam from "@/assets/members/บีม.jpeg";
+import Stang from "@/assets/members/สตางค์.jpg";
+import Float from "@/assets/members/Float.jpeg";
+import Saint from "@/assets/members/Saint.jpeg";
+import Boom from "@/assets/members/บูม.jpeg";
+import BaJang from "@/assets/members/บ๊ะจ่าง.jpeg";
+import Green from "@/assets/members/Green.jpeg";
+import Sand from "@/assets/members/Sand.jpeg";
+import Pat from "@/assets/members/ปัท.jpeg";
+import Party from "@/assets/members/ปาร์ตี้.jpeg";
+import Gundum from "@/assets/members/Gundum.jpeg";
+import Scott from "@/assets/members/Scott.jpg";
+import Om from "@/assets/members/ออม.jpeg";
+import KungTen from "@/assets/members/กุ้งเต้น.jpeg";
+import Jame from "@/assets/members/Jame.jpeg";
+import Sharp from "@/assets/members/Sharp.jpeg";
+import Pat2 from "@/assets/members/แพท.png";
+import Jukjan from "@/assets/members/จั๊กจั่น.jpeg";
+import Lin from "@/assets/members/Lin.jpeg";
+import Stamp from "@/assets/members/Stamp.jpg";
+import Juer from "@/assets/members/จื้อ.jpeg";
+import Winter from "@/assets/members/วินเทอร์.jpeg";
+import Meen from "@/assets/members/Meen.jpeg";
+import Titan from "@/assets/members/Titan.jpeg";
+import Min from "@/assets/members/มิ้น.jpeg";
 
-const images = [
-    {
-        src: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Person',
-        name: 'Nawa',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Cat',
-        name: 'Ji-yeon',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Cat',
-        name: 'Babe',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Cat',
-        name: 'Parabola',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Dog',
-        name: 'Bobby',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Cat',
-        name: 'Teeee',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Dog',
-        name: 'Teddy',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Dog',
-        name: 'HIII',
-    },
-    {
-        src: 'https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80',
-        alt: 'Turtle',
-        name: 'Eiei',
-    },
-];
+export default function MemberBox() {
+  const members = [
+    { name: "Aim", image: Aim },
+    { name: "Memee", image: Memee },
+    { name: "Wawa", image: Wawa },
+    { name: "ลีโอ", image: Leo },
+    { name: "Amy", image: Amy },
+    { name: "Neiy", image: Neiy },
+    { name: "Yeekheng", image: Yeekheng },
+    { name: "สกาย", image: Sky },
+    { name: "Big", image: Big },
+    { name: "Noon", image: Noon },
+    { name: "ธิ", image: Thi },
+    { name: "ฟอร์ด", image: Ford },
+    { name: "Bonus", image: Bonus },
+    { name: "Ohm", image: Ohm },
+    { name: "บี", image: B },
+    { name: "สโนว์", image: Snow },
+    { name: "Boss", image: Boss },
+    { name: "Paeng", image: Paeng },
+    { name: "พล", image: Plon },
+    { name: "ตาต้า", image: Tata },
+    { name: "Brunei", image: Brunei },
+    { name: "Pim", image: Pim },
+    { name: "วี", image: V },
+    { name: "แตงโม", image: Watermelon },
+    { name: "Chega", image: Chega },
+    { name: "Putter", image: Putter },
+    { name: "นิว", image: New },
+    { name: "เฟมมี่", image: Femmy },
+    { name: "Earth", image: Earth },
+    { name: "Rada", image: Rada },
+    { name: "บีม", image: Beam },
+    { name: "สตางค์", image: Stang },
+    { name: "Float", image: Float },
+    { name: "Saint", image: Saint },
+    { name: "บูม", image: Boom },
+    { name: "บ๊ะจ่าง", image: BaJang },
+    { name: "Green", image: Green },
+    { name: "Sand", image: Sand },
+    { name: "ปัท", image: Pat },
+    { name: "ปาร์ตี้", image: Party },
+    { name: "Gundum", image: Gundum },
+    { name: "Scott", image: Scott },
+    { name: "ออม", image: Om },
+    { name: "กุ้งเต้น", image: KungTen },
+    { name: "Jame", image: Jame },
+    { name: "Sharp", image: Sharp },
+    { name: "แพท", image: Pat2 },
+    { name: "จั๊กจั่น", image: Jukjan },
+    { name: "Lin", image: Lin },
+    { name: "Stamp", image: Stamp },
+    { name: "จื้อ", image: Juer },
+    { name: "วินเทอร์", image: Winter },
+    { name: "Meen", image: Meen },
+    { name: "Titan", image: Titan },
+    { name: "มิ้น", image: Min },
+  ];
 
-const Item = ({ src, alt, name }: { src: string; alt: string; name: string }) => {
-    return (
-        <div className="flex items-center gap-4">
-            <img src={src} alt={alt} className="w-20 h-20 rounded-full" />
-            <p className="font-bold text-lg whitespace-nowrap">{name}</p>
-        </div>
-    );
-};
-
-const MemberBox: React.FC = () => {
-    return (
-        <div className='bg-[#0F082C] pb-20'>
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-10 justify-center w-3/4 mx-auto">
-                {images.map((image, index) => (
-                    <div
-                        key={index}
-                        className="flex items-center gap-4 bg-gray-800 rounded-lg p-4 text-white font-semibold min-w-[200px] max-w-fit"
-                    >
-                        <Item src={image.src} alt={image.alt} name={image.name} />
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-
-export default MemberBox;
+  return (
+    <div className="bg-[#0F082C] pb-20">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-10 justify-center w-3/4 mx-auto">
+        {members.map((member, index) => (
+          <div
+            key={index}
+            className="flex items-center gap-4 bg-gray-800 rounded-lg p-4 text-white font-semibold min-w-[200px] max-w-fit"
+          >
+            <Image
+              src={member.image}
+              alt={member.name}
+              className="w-20 h-20 rounded-full object-cover"
+              width={80}
+              height={80}
+            />
+            <p className="font-bold text-lg whitespace-nowrap">{member.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}