diff --git a/public/rpkm/activities/walkrally-1.JPG b/public/rpkm/activities/walkrally-1.JPG new file mode 100644 index 00000000..8883060d Binary files /dev/null and b/public/rpkm/activities/walkrally-1.JPG differ diff --git a/public/rpkm/activities/walkrally-2.JPG b/public/rpkm/activities/walkrally-2.JPG new file mode 100644 index 00000000..255ea1a3 Binary files /dev/null and b/public/rpkm/activities/walkrally-2.JPG differ diff --git a/public/rpkm/activities/walkrally-3.JPG b/public/rpkm/activities/walkrally-3.JPG new file mode 100644 index 00000000..c70f4079 Binary files /dev/null and b/public/rpkm/activities/walkrally-3.JPG differ diff --git a/public/rpkm/activities/walkrally-4.JPG b/public/rpkm/activities/walkrally-4.JPG new file mode 100644 index 00000000..2133a9cf Binary files /dev/null and b/public/rpkm/activities/walkrally-4.JPG differ diff --git a/public/rpkm/activities/walkrallybackground.JPG b/public/rpkm/activities/walkrallybackground.JPG new file mode 100644 index 00000000..6e47d7d4 Binary files /dev/null and b/public/rpkm/activities/walkrallybackground.JPG differ diff --git a/src/app/rpkm/activities/[category]/page.tsx b/src/app/rpkm/activities/[category]/page.tsx index f9ebbce5..30d49ea9 100644 --- a/src/app/rpkm/activities/[category]/page.tsx +++ b/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" /> ))} diff --git a/src/app/rpkm/activities/details/[id]/page.tsx b/src/app/rpkm/activities/details/[id]/page.tsx index 8654f936..d446bdfc 100644 --- a/src/app/rpkm/activities/details/[id]/page.tsx +++ b/src/app/rpkm/activities/details/[id]/page.tsx @@ -11,6 +11,11 @@ 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; } @@ -18,7 +23,7 @@ const Page = ({ params }: { params: { id: string } }) => { return (
- + back { />
-
-

{activity.content}

+
+

รูปแบบกิจกรรม

+
    + {activity.content.map((content, index) => ( +
  • + {content} +
  • + ))} +
diff --git a/src/app/rpkm/activities/home/page.tsx b/src/app/rpkm/activities/home/page.tsx index de202e2e..021984b9 100644 --- a/src/app/rpkm/activities/home/page.tsx +++ b/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 (
@@ -68,14 +65,22 @@ const page = () => { href="/rpkm/activities/activities" > ดูทั้งหมด - + */} - - + +
+ {/* @@ -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" diff --git a/src/components/rpkm/Activities/Card.tsx b/src/components/rpkm/Activities/Card.tsx index 4e3dbfda..b371c035 100644 --- a/src/components/rpkm/Activities/Card.tsx +++ b/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 = ({ imageHeight, imageClassName, href, - content, + description, contentClassName, }) => { return ( @@ -54,7 +54,7 @@ const Card: React.FC = ({

-

{content}

+

{description}

= ({ cards, className }) => { key={index} name={card.name} image={card.image} - content={card.content} + description={card.description} href={`/rpkm/activities/details/${card.id}`} className={className} /> diff --git a/src/components/rpkm/Sidebar/Menu.tsx b/src/components/rpkm/Sidebar/Menu.tsx index dbd4ee0a..d13c56ef 100644 --- a/src/components/rpkm/Sidebar/Menu.tsx +++ b/src/components/rpkm/Sidebar/Menu.tsx @@ -41,12 +41,12 @@ function Menu() { > กิจกรรมในงาน -
กิจกรรม Walk Rally -
+