Merge pull request #23 from esc-chula/feat/memory-page

feat: memory phase 2 photo
esc-chula · Jan 19, 2025 · b8c75ff · b8c75ff
2 parents f38d38b + 7fd5087
commit b8c75ff
Show file tree

Hide file tree

Showing 10 changed files with 2,882 additions and 2,297 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/memory/day1.webp b/public/memory/day1.webp
diff --git a/public/memory/day2.webp b/public/memory/day2.webp
diff --git a/public/memory/day3.webp b/public/memory/day3.webp
diff --git a/public/memory/day4.webp b/public/memory/day4.webp
diff --git a/public/memory/group_image.webp b/public/memory/group_image.webp
diff --git a/src/app/(authProvider)/Memory/page.tsx b/src/app/(authProvider)/Memory/page.tsx
@@ -5,7 +5,6 @@ import { Pencil } from "@/components/memory/icon/Pencil";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import CommentSection from "@/components/memory/CommentSection";
-// import Phase2Photo from "@/components/memory/Phase2Photo";
 import { axiosClient } from "@/libs/axios";
 import { useSession } from "next-auth/react";
 import getShortedBaanName from "@/libs/getShortedBaanName";
@@ -101,12 +100,12 @@ export default function Memory() {
         />
 
         {/* Photo after finish camp */}
-        {/* <Phase2Photo /> */}
-        <p className="mt-8 w-full text-center font-ibm font-bold text-gray-300">
+        <Phase2Photo />
+        {/* <p className="mt-8 w-full text-center font-ibm font-bold text-gray-300">
           Coming Soon...
           <br />
           รอติดตามในวันสุดท้ายของค่ายนะ!
-        </p>
+        </p> */}
       </div>
     </>
   );

diff --git a/src/app/visitor/Memory/page.tsx b/src/app/visitor/Memory/page.tsx
@@ -4,7 +4,6 @@ import { LeftArrow } from "@/components/memory/icon/LeftArrow";
 import { Pencil } from "@/components/memory/icon/Pencil";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-// import Phase2Photo from "@/components/memory/Phase2Photo";
 import { axiosClient } from "@/libs/axios";
 import getShortedBaanName from "@/libs/getShortedBaanName";
 import Image from "next/image";
@@ -62,7 +61,7 @@ export default function Memory() {
         </div>
         <div className="item-center mx-4 flex justify-center">
           <Image
-            src="/memory/larngear_placeholder.webp"
+            src="/memory/group_image.webp"
             alt="larngear_placholder"
             width={390}
             height={180}
@@ -81,12 +80,12 @@ export default function Memory() {
         </div>
 
         {/* Photo after finish camp */}
-        {/* <Phase2Photo /> */}
-        <p className="mt-8 w-full text-center font-ibm font-bold text-gray-300">
+        <Phase2Photo />
+        {/* <p className="mt-8 w-full text-center font-ibm font-bold text-gray-300">
           Coming Soon...
           <br />
           รอติดตามในวันสุดท้ายของค่ายนะ!
-        </p>
+        </p> */}
       </div>
     </>
   );

diff --git a/src/components/memory/Banner.tsx b/src/components/memory/Banner.tsx
@@ -11,7 +11,7 @@ const Banner = ({
     <>
       <a href={googleDriveUrl}>
         <Image
-          className="object-cover"
+          className="object-cover hover:scale-110 transition duration-300"
           src={imgUrl}
           width={80}
           height={130}

diff --git a/src/components/memory/Phase2Photo.tsx b/src/components/memory/Phase2Photo.tsx
@@ -9,101 +9,142 @@ const Phase2Photo = () => {
       <div className="m-2 text-center font-ibm text-base font-bold">
         ส่วนบ้าน
       </div>
+      <div className="m-2 text-center font-ibm text-xs">
+        คลิกที่ธงบ้านเพื่อดูรูปเพิ่มเติม
+      </div>
       <div className="m-4">
         <div className="mb-4 flex justify-center space-x-4">
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/1.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1-F9jgBMLj7z52FQMIaZNRnZs1hPVJMXf"
           />
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/2.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1v8u7mZdn1VrhULN-XZrJ_06Zc6kVtBs_?usp=sharing"
           />
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/3.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1k1wQrTE6ArRibvzij8yQQU1rljd-oau4"
           />
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/4.webp`}
+            googleDriveUrl="https://drive.google.com/file/d/1-GwCB3Zn97CBDm_WwnApyp9voYU6l15o"
           />
         </div>
         <div className="flex justify-center space-x-4">
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/5.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1tCPPKsvnSeEqdYnNYwhiBKz3HpcWYunV"
           />
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/6.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1tCPPKsvnSeEqdYnNYwhiBKz3HpcWYunV"
           />
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/7.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1FXHRrsyWiiWxwouyw_hYK8Y3WonebN7g?usp=sharing"
           />
           <Banner
-            imgUrl="https://placehold.co/100x300"
-            googleDriveUrl="https://placehold.co/100x300"
+            imgUrl={`/flags/8.webp`}
+            googleDriveUrl="https://drive.google.com/drive/folders/1FXHRrsyWiiWxwouyw_hYK8Y3WonebN7g?usp=sharing"
           />
         </div>
       </div>
 
-      <div className="m-4 text-center font-ibm text-base font-bold">
+      <div className="mt-4 text-center font-ibm text-base font-bold">
         ส่วนกลาง
       </div>
+      <div className="m-2 text-center font-ibm text-xs">
+        คลิกที่รูปเพื่อดูรูปเพิ่มเติม
+      </div>
       <div className="item-center m-4 flex justify-center">
         <div className="grid grid-cols-2 gap-4">
-          <Image
-            src="https://placehold.co/300x200"
+          <div>
+            <a href="https://drive.google.com/drive/folders/1CG-4ePHvj4mnL1P07i_RhQHzSpv3w-Lc?usp=drive_link">
+            <Image
+            className="hover:scale-110 transition duration-300"
+            src="/memory/day1.webp"
             width={170}
             height={60}
             alt="group image"
           />
-          <Image
-            src="https://placehold.co/300x200"
+
+            </a>
+          <div className="text-center">Day 1</div>
+          </div>
+          <div>
+            <a href="https://drive.google.com/drive/folders/1gh5dAIsAacmGpi-5RTg6_wg6zJltqY8U?usp=drive_link">
+            <Image
+            className="hover:scale-110 transition duration-300"
+            src="/memory/day2.webp"
             width={170}
             height={60}
             alt="group image"
           />
-          <Image
-            src="https://placehold.co/300x200"
+
+            </a>
+          <div className="text-center">Day 2</div>
+          </div>
+          <div>
+            <a href="https://drive.google.com/drive/folders/1K588EIR11Y_mEapvszrCKsGSr7vwAglx?usp=drive_link">
+            <Image
+            className="hover:scale-110 transition duration-300"
+            src="/memory/day3.webp"
             width={170}
             height={60}
             alt="group image"
           />
-          <Image
-            src="https://placehold.co/300x200"
+            </a>
+          <div className="text-center">Day 3</div>
+          </div>
+          <div>
+            <a href="https://drive.google.com/drive/folders/1pxFLLQgOw8OaeZ7CWFqhFAViW7qe98Ui?usp=drive_link">
+            <Image
+            className="hover:scale-110 transition duration-300"
+            src="/memory/day4.webp"
             width={170}
             height={60}
             alt="group image"
           />
+
+            </a>
+          <div className="text-center">Day 4</div>
+          </div>
         </div>
       </div>
-
-      <div>
-        <div className="m-4 text-center font-vimamsa text-3xl font-normal">
+        {/* <div className="m-4 text-center font-vimamsa text-3xl font-normal">
           Video
         </div>
-        <div className="flex items-center justify-center pb-10">
-          <div className="grid grid-cols-2 gap-10">
-            <div className="aspect-w-21 aspect-h-9 ml-4">
+            <div className="flex item-center justify-center aspect-w-21 aspect-h-9">
               <iframe
                 src="https://www.youtube.com/embed/19g66ezsKAg"
                 allowFullScreen
-                className="h-full w-full"
               />
             </div>
-            <div className="text-black">
-              <div className="mb-2 flex justify-center text-base font-semibold">
+            <div className="text-white mt-2 mb-2">
+              <div className=" flex justify-center text-base font-bold">
+                Credit
+              </div>
+              <div className="ml-4 mr-4">
+              <div className="flex justify-center text-sm font-semibold">Photo</div>
+              <div className="flex text-center text-xs">P'Pung, P'Mickey, P'Pun, P'Punch, P'Dream, P'Knight, P'Fu, P'Nest, P'Tle, P'Focus, P'Justmine, P'Petch</div>
+              <div className="flex justify-center text-sm mt-2 font-semibold">Production</div>
+              <div className="flex text-center text-xs">P'Poon, P'Yang, P'Punsai, P'Puth, P'Paang, P'Fon, P'Ei, P'Am, P'Belle, P'Gor, P'Pun, P'Chin, P'Ik</div>
+
+              </div>
+              
+            </div> */}
+            <div className="text-white mb-2">
+              <div className=" flex justify-center text-lg font-bold">
                 Credit
               </div>
-              <div className="flex justify-center">Credit</div>
-              <div className="flex justify-center">Credit</div>
-              <div className="flex justify-center">Credit</div>
+              <div className="ml-4 mr-4">
+              <div className="flex justify-center text-sm font-semibold">Photo</div>
+              <div className="flex text-center text-xs">P'Pung, P'Mickey, P'Pun, P'Punch, P'Dream, P'Knight, P'Fu, P'Nest, P'Tle, P'Focus, P'Justmine, P'Petch</div>
+              </div>
+
             </div>
-          </div>
-        </div>
-      </div>
+
     </>
   );
 };