Merge pull request #205 from isd-sgcu/main

add: wall-ralley data

src/app/rpkm/activities/[category]/page.tsx

@@ -20,7 +20,7 @@ const Page = ({ params }: { params: { category: string } }) => {
 
   const getImage = () => {
     switch (category) {
-      case 'walkrally':
+      case 'walk-rally':
         return WalkRallyBanner;
       case 'community':
         return CommunityBanner;
@@ -52,9 +52,10 @@ const Page = ({ params }: { params: { category: string } }) => {
             key={index}
             name={card.name}
             image={card.image}
-            content={card.content}
+            description={card.description}
             href={`/rpkm/activities/details/${card.id}`}
-            className="w-[60vw] m-auto opacity-80"
+            className="w-[80vw] m-auto opacity-80"
+            contentClassName="line-clamp-3"
           />
         ))}
       </div>

src/app/rpkm/activities/details/[id]/page.tsx

@@ -11,14 +11,19 @@ const Page = ({ params }: { params: { id: string } }) => {
   const id = params.id;
   const activity = activities.find((activity) => activity.id === id);
 
+  const prevPage =
+    id.split('-').length - 1 === 0
+      ? 'home'
+      : id.substring(0, id.lastIndexOf('-'));
+
   if (!activity) {
     return;
   }
 
   return (
     <section className="min-h-screen bg-[url('/rpkm/activities/smaller-background.png')] bg-cover bg-[#EAE3C3] text-black">
       <Navbar />
-      <Link href="/rpkm/activities/home">
+      <Link href={`/rpkm/activities/${prevPage}`}>
         <Image
           src={BackButton}
           alt="back"
@@ -38,8 +43,18 @@ const Page = ({ params }: { params: { id: string } }) => {
         />
       </div>
       <div className="drop-shadow-lg flex justify-center pb-16">
-        <div className="bg-[#FFFEF7] [clip-path:polygon(1rem_0,calc(100%-1rem)_0,100%_1rem,100%_calc(100%-1rem),calc(100%-1rem)_100%,1rem_100%,0_calc(100%-1rem),0_1rem)] flex flex-col p-5 text-[#313131] w-[80vw] h-[60vh]">
-          <p>{activity.content}</p>
+        <div className="bg-[#FFFEF7] [clip-path:polygon(1rem_0,calc(100%-1rem)_0,100%_1rem,100%_calc(100%-1rem),calc(100%-1rem)_100%,1rem_100%,0_calc(100%-1rem),0_1rem)] flex flex-col p-5 text-[#313131] w-[80vw]">
+          <p className="underline">รูปแบบกิจกรรม</p>
+          <ul className="">
+            {activity.content.map((content, index) => (
+              <li
+                key={index}
+                className="mt-2 list-disc ml-5"
+              >
+                {content}
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
     </section>

src/app/rpkm/activities/home/page.tsx

@@ -5,7 +5,7 @@ import Card from '@/components/rpkm/Activities/Card';
 import Divider from '@/components/rpkm/Activities/Divider';
 
 // import ActivitiesBanner from '@public/rpkm/activities/activities.png';
-// import WalkRallyBanner from '@public/rpkm/activities/walkrally.png';
+import WalkRallyBanner from '@public/rpkm/activities/walkrally.png';
 import CommunityBanner from '@public/rpkm/activities/community.png';
 import BaanBanner from '@public/rpkm/activities/baan.png';
 
@@ -15,9 +15,6 @@ const page = () => {
   // const activitiesContent = activities.filter(
   //   (activity) => activity.category === 'activities'
   // );
-  // const walkRallyContent = activities.filter(
-  //   (activity) => activity.category === 'walkrally'
-  // );
 
   return (
     <div className="min-h-screen bg-rpkm-pink">
@@ -68,14 +65,22 @@ const page = () => {
             href="/rpkm/activities/activities"
           >
             ดูทั้งหมด
-          </Link>
+          </Link> */}
           <Divider />
           <Banner image={WalkRallyBanner} />
-          <ScrollSection
-            cards={walkRallyContent}
-            className="w-[60vw]"
-          />
-          <Link
+          <div className="justify-center flex">
+            <Card
+              name="Walk Rally"
+              image="/rpkm/activities/walkrallybackground.JPG"
+              imageWidth="70vw"
+              imageHeight="70vw"
+              description='ขอเชิญชวนนิสิตทุกคน เข้ามาสำรวจความรู้ในด้านต่าง ๆ ร่วมกันในกิจกรรม "walk rally"  ไม่ว่าจะเป็นเรื่องวิทยาศาสตร์ สังคมและการเมือง หรือ ข้อมูล insight มหาวิทยาลัย ในรูปแบบของฐานความรู้ที่อัดแน่นไปด้วยกิจกรรมมากมาย ทั้งเกมสนุก ๆ และ workshop ที่หลากหลาย อีกทั้งยังได้สาระความรู้แบบจัดเต็ม พร้อมกับกิจกรรมที่ช่วยสานสัมพันธ์นิสิตใหม่ อย่าลืมแวะมาสนุกด้วยกันนะ'
+              href="/rpkm/activities/walk-rally"
+              className="w-[80vw]"
+              contentClassName="line-clamp-3"
+            />
+          </div>
+          {/* <Link
             className="text-sm font-semibold flex justify-end underline mr-4 mt-2"
             href="/rpkm/activities/walkrally"
           >
@@ -89,7 +94,7 @@ const page = () => {
               image="/rpkm/activities/communitybackground.svg"
               imageWidth="70vw"
               imageHeight="70vw"
-              content="กิจกรรมชุมชน เป็นกิจกรรมที่จัดขึ้นเพื่อให้นิสิตใหม่ ได้ทำความรู้จักกับร้านค้า และชุมชนบริเวณโดยรอบจุฬาลงกรณ์มหาวิทยาลัยให้มากขึ้น ผ่านกิจกรรมการสะสมแต้มผ่าน Line OA ด้วยการร่วมทำกิจกรรมถ่ายรูปเช็คอิน ตะลุยทานของอร่อย ๆ รอบมอ ทำกิจกรรมอาสาเพื่อพัฒนาสังคม โดยร้านค้าและสถานที่ที่อยู่ในกิจกรรมมีตั้งแต่ร้านเก่าแก่ที่อยู่คู่จุฬาฯมาอย่างยาวนานตลอดจนร้านค้าใหม่ ๆ ที่เพิ่งเกิดขึ้นและน่าไปเช็คอิน บอกได้เลยว่า เหล่าเฟรชชี่ CU108 พลาดไม่ได้สักร้านเลยแน่นอน เพิ่มเพื่อนไลน์ OA และรับบัตรสะสมแต้มกัน เริ่มทำกิจกรรมกันได้เลย"
+              description="กิจกรรมชุมชน เป็นกิจกรรมที่จัดขึ้นเพื่อให้นิสิตใหม่ ได้ทำความรู้จักกับร้านค้า และชุมชนบริเวณโดยรอบจุฬาลงกรณ์มหาวิทยาลัยให้มากขึ้น ผ่านกิจกรรมการสะสมแต้มผ่าน Line OA ด้วยการร่วมทำกิจกรรมถ่ายรูปเช็คอิน ตะลุยทานของอร่อย ๆ รอบมอ ทำกิจกรรมอาสาเพื่อพัฒนาสังคม โดยร้านค้าและสถานที่ที่อยู่ในกิจกรรมมีตั้งแต่ร้านเก่าแก่ที่อยู่คู่จุฬาฯมาอย่างยาวนานตลอดจนร้านค้าใหม่ ๆ ที่เพิ่งเกิดขึ้นและน่าไปเช็คอิน บอกได้เลยว่า เหล่าเฟรชชี่ CU108 พลาดไม่ได้สักร้านเลยแน่นอน เพิ่มเพื่อนไลน์ OA และรับบัตรสะสมแต้มกัน เริ่มทำกิจกรรมกันได้เลย"
               href="/rpkm/activities/details/community"
               className="w-[80vw]"
               contentClassName="line-clamp-3"
@@ -109,7 +114,7 @@ const page = () => {
               image="/rpkm/activities/baanbackground.png"
               imageWidth="70vw"
               imageHeight="70vw"
-              content="กิจกรรมสานสัมพันธ์นิสิตใหม่ CU108 ที่จัดขึ้นผ่านกิจกรรมบ้านรับเพื่อน โดยสามารถเลือกบ้านรับเพื่อนที่สนใจและมาเข้าร่วมกิจกรรมที่จะเกิดขึ้นอย่างมากมายภายในบ้านรับเพื่อน อีกทั้งยังมีกิจกรรมสันโต้ที่จะทำให้ทุกคนได้พบกับเพื่อนต่างบ้านและได้ทำกิจกรรมร่วมกัน นอกจากจะได้รับความสนุกสนานแล้วก็ยังได้รู้จักเพื่อนใหม่อีกด้วย"
+              description="กิจกรรมสานสัมพันธ์นิสิตใหม่ CU108 ที่จัดขึ้นผ่านกิจกรรมบ้านรับเพื่อน โดยสามารถเลือกบ้านรับเพื่อนที่สนใจและมาเข้าร่วมกิจกรรมที่จะเกิดขึ้นอย่างมากมายภายในบ้านรับเพื่อน อีกทั้งยังมีกิจกรรมสันโต้ที่จะทำให้ทุกคนได้พบกับเพื่อนต่างบ้านและได้ทำกิจกรรมร่วมกัน นอกจากจะได้รับความสนุกสนานแล้วก็ยังได้รู้จักเพื่อนใหม่อีกด้วย"
               href="/rpkm/activities/details/baan"
               className="w-[80vw]"
               contentClassName="line-clamp-3"

src/components/rpkm/Activities/Card.tsx

@@ -9,7 +9,7 @@ interface CardProps {
   imageWidth?: string;
   imageHeight?: string;
   imageClassName?: string;
-  content: string;
+  description: string;
   href: string;
   className?: string;
   contentClassName?: string;
@@ -23,7 +23,7 @@ const Card: React.FC<CardProps> = ({
   imageHeight,
   imageClassName,
   href,
-  content,
+  description,
   contentClassName,
 }) => {
   return (
@@ -54,7 +54,7 @@ const Card: React.FC<CardProps> = ({
           <hr className="h-[2px] bg-[#414643] w-full" />
           <hr className="h-[2px] bg-[#414643] w-full" />
         </div>
-        <p className={cn('text-sm m-2', contentClassName)}>{content}</p>
+        <p className={cn('text-sm m-2', contentClassName)}>{description}</p>
         <Link
           className="flex w-full justify-end text-sm font-semibold underline"
           href={href}

src/components/rpkm/Activities/ScrollSection.tsx

@@ -14,7 +14,7 @@ const ScrollSection: React.FC<ScrollSectionProps> = ({ cards, className }) => {
           key={index}
           name={card.name}
           image={card.image}
-          content={card.content}
+          description={card.description}
           href={`/rpkm/activities/details/${card.id}`}
           className={className}
         />

src/components/rpkm/Sidebar/Menu.tsx

@@ -41,12 +41,12 @@ function Menu() {
               >
                 กิจกรรมในงาน
               </div>
-              <div
-                // href="/rpkm/activities/"
-                className="text-left text-gray-400 cursor-not-allowed"
+              <Link
+                href="/rpkm/activities/walk-rally"
+                className="text-left"
               >
                 กิจกรรม Walk Rally
-              </div>
+              </Link>
               <Link
                 href="/rpkm/activities/details/community"
                 className="text-left"