From 1a910d1a27684ec7d0ccb9fb0fa24b6850859754 Mon Sep 17 00:00:00 2001
From: Ruby McNamee <rmcn333@aucklanduni.ac.nz>
Date: Thu, 11 Sep 2025 15:12:43 +1200
Subject: [PATCH 1/2] feat: added base of events filter, and moved blue koru in
 past events section so that page isn't larger than screen

---
 src/app/(frontend)/events/page.tsx          |  2 ++
 src/components/events/EventsFilter.tsx      | 28 +++++++++++++++++++++
 src/components/events/PastEventsSection.tsx |  3 +--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/events/EventsFilter.tsx

diff --git a/src/app/(frontend)/events/page.tsx b/src/app/(frontend)/events/page.tsx
index 6956d2b..a2831fc 100644
--- a/src/app/(frontend)/events/page.tsx
+++ b/src/app/(frontend)/events/page.tsx
@@ -8,6 +8,7 @@ import EventsSignUpModal from '@/components/events/EventsSignUpModal'
 import RecentEvents from '@/components/events/RecentEvents'
 import PastEventsSection from '@/components/events/PastEventsSection'
 import PastEventsPopUpModal from '@/components/events/PastEventsPopUpModal'
+import EventsFilter from '@/components/events/EventsFilter'
 
 export default function EventsPage() {
   const [signOpen, setSignOpen] = useState(false)
@@ -16,6 +17,7 @@ export default function EventsPage() {
     <div className="home">
       <Header />
       <Hero />
+      <EventsFilter />
       <RecentEvents />
       <PastEventsSection />
       <Footer />
diff --git a/src/components/events/EventsFilter.tsx b/src/components/events/EventsFilter.tsx
new file mode 100644
index 0000000..e9a14e9
--- /dev/null
+++ b/src/components/events/EventsFilter.tsx
@@ -0,0 +1,28 @@
+
+export default function EventsFilter() {
+
+  return (
+    <div className="relative py-3 flex justify-center bg-[#E6E1DE]">
+      <div className="flex flex-row gap-10">
+        <p className="font-bold text-2xl">Filter Events by: </p>
+        <div className="flex flex-row overflow-x-auto w-200 no-scrollbar gap-5">
+        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-2xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
+          Upcoming
+        </button>
+        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
+          Past
+        </button>
+        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
+          Workshop
+        </button>
+        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
+          Exhibition
+        </button>
+        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
+          Social
+        </button>
+      </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/events/PastEventsSection.tsx b/src/components/events/PastEventsSection.tsx
index bf4dabf..1fa0ddf 100644
--- a/src/components/events/PastEventsSection.tsx
+++ b/src/components/events/PastEventsSection.tsx
@@ -10,8 +10,7 @@ export default function PastEventsSection() {
         src={BlueKoru}
         alt="Blue Koru decoration"
         width={256}
-        className="absolute -right-10 top-20 rotate-180
-          "
+        className="absolute right-0 top-20 rotate-180"
       />
       <h3 className="bg-[#E6E1DE] inline text-5xl px-20 py-5 border-none rounded-t-xl font-bold">
         PREVIOUS EVENTS

From 777237b73bfa042a98e0fb083d1bafa2db0b59b0 Mon Sep 17 00:00:00 2001
From: Ruby McNamee <rmcn333@aucklanduni.ac.nz>
Date: Sun, 14 Sep 2025 18:57:35 +1200
Subject: [PATCH 2/2] implemented filters for event type for both past and
 upcoming events

---
 src/app/(frontend)/events/page.tsx          |  2 --
 src/components/events/EventsFilter.tsx      | 38 +++++++++------------
 src/components/events/PastEventsFilter.tsx  | 22 ++++++++++++
 src/components/events/PastEventsSection.tsx |  6 ++--
 src/components/events/RecentEvents.tsx      |  4 ++-
 src/components/events/YearFilter.tsx        |  4 +--
 6 files changed, 47 insertions(+), 29 deletions(-)
 create mode 100644 src/components/events/PastEventsFilter.tsx

diff --git a/src/app/(frontend)/events/page.tsx b/src/app/(frontend)/events/page.tsx
index a2831fc..6956d2b 100644
--- a/src/app/(frontend)/events/page.tsx
+++ b/src/app/(frontend)/events/page.tsx
@@ -8,7 +8,6 @@ import EventsSignUpModal from '@/components/events/EventsSignUpModal'
 import RecentEvents from '@/components/events/RecentEvents'
 import PastEventsSection from '@/components/events/PastEventsSection'
 import PastEventsPopUpModal from '@/components/events/PastEventsPopUpModal'
-import EventsFilter from '@/components/events/EventsFilter'
 
 export default function EventsPage() {
   const [signOpen, setSignOpen] = useState(false)
@@ -17,7 +16,6 @@ export default function EventsPage() {
     <div className="home">
       <Header />
       <Hero />
-      <EventsFilter />
       <RecentEvents />
       <PastEventsSection />
       <Footer />
diff --git a/src/components/events/EventsFilter.tsx b/src/components/events/EventsFilter.tsx
index e9a14e9..36d95ec 100644
--- a/src/components/events/EventsFilter.tsx
+++ b/src/components/events/EventsFilter.tsx
@@ -1,27 +1,21 @@
-
 export default function EventsFilter() {
-
   return (
-    <div className="relative py-3 flex justify-center bg-[#E6E1DE]">
-      <div className="flex flex-row gap-10">
-        <p className="font-bold text-2xl">Filter Events by: </p>
-        <div className="flex flex-row overflow-x-auto w-200 no-scrollbar gap-5">
-        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-2xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
-          Upcoming
-        </button>
-        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
-          Past
-        </button>
-        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
-          Workshop
-        </button>
-        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
-          Exhibition
-        </button>
-        <button className="font-bold text-2xl text-[#13384E] border-2 rounded-xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
-          Social
-        </button>
-      </div>
+    <div className="relative px-2 sm:px-4 md:px-6 py-2 sm:py-4 flex justify-left w-full bg-[#13384E]">
+      <div className="px-2 sm:px-4 py-2 bg-[#E6E1DE] rounded-2xl w-full">
+        <div className="flex flex-row gap-2 sm:gap-4 md:gap-6 items-center overflow-x-auto w-full no-scrollbar">
+          <p className="font-bold text-lg sm:text-xl md:text-2xl px-1 sm:px-2 whitespace-nowrap flex-shrink-0">
+            Filter Events by:{' '}
+          </p>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#FFF8F3] border-[#13384E] whitespace-nowrap flex-shrink-0">
+            Workshop
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#FFF8F3] border-[#13384E] whitespace-nowrap flex-shrink-0">
+            Exhibition
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#FFF8F3] border-[#13384E] whitespace-nowrap flex-shrink-0">
+            Social
+          </button>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/events/PastEventsFilter.tsx b/src/components/events/PastEventsFilter.tsx
new file mode 100644
index 0000000..34c44d6
--- /dev/null
+++ b/src/components/events/PastEventsFilter.tsx
@@ -0,0 +1,22 @@
+export default function PastEventsFilter() {
+  return (
+    <div className="relative px-2 sm:px-4 md:px-6 py-2 sm:py-4 flex justify-left w-full bg-[#E6E1DE]">
+      <div className="px-2 sm:px-4 py-2 bg-[#13384E] rounded-2xl w-full">
+        <div className="flex flex-row gap-2 sm:gap-4 md:gap-6 items-center overflow-x-auto w-full no-scrollbar">
+          <p className="font-bold text-lg sm:text-xl md:text-2xl px-1 sm:px-2 whitespace-nowrap flex-shrink-0 text-[#E6E1DE]">
+            Filter Events by:{' '}
+          </p>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#E6E1DE] border-[#FFF8F3] whitespace-nowrap flex-shrink-0">
+            Workshop
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#E6E1DE] border-[#FFF8F3] whitespace-nowrap flex-shrink-0">
+            Exhibition
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#E6E1DE] border-[#FFF8F3] whitespace-nowrap flex-shrink-0">
+            Social
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/events/PastEventsSection.tsx b/src/components/events/PastEventsSection.tsx
index 1fa0ddf..efdb5e1 100644
--- a/src/components/events/PastEventsSection.tsx
+++ b/src/components/events/PastEventsSection.tsx
@@ -1,4 +1,5 @@
 import YearFilter from '@/components/events/YearFilter'
+import PastEventsFilter from '@/components/events/PastEventsFilter'
 import PastEvents from '@/components/events/PastEventsGrid'
 import Image from 'next/image'
 import BlueKoru from '@/assets/blue_koru.png'
@@ -10,12 +11,13 @@ export default function PastEventsSection() {
         src={BlueKoru}
         alt="Blue Koru decoration"
         width={256}
-        className="absolute right-0 top-20 rotate-180"
+        className="absolute right-0 top-20 rotate-180 z-10"
       />
       <h3 className="bg-[#E6E1DE] inline text-5xl px-20 py-5 border-none rounded-t-xl font-bold">
         PREVIOUS EVENTS
       </h3>
-      <div className="bg-[#E6E1DE] flex flex-col items-center gap-y-10 py-10">
+      <PastEventsFilter />
+      <div className="bg-[#E6E1DE] flex flex-col items-center gap-y-10 pt-2 pb-10"> 
         <YearFilter />
         <PastEvents />
       </div>
diff --git a/src/components/events/RecentEvents.tsx b/src/components/events/RecentEvents.tsx
index 07b3dc0..c49c345 100644
--- a/src/components/events/RecentEvents.tsx
+++ b/src/components/events/RecentEvents.tsx
@@ -2,7 +2,7 @@
 import { useState } from 'react'
 import Image from 'next/image'
 import SignUpModal from '@/components/common/SignUpModal'
-
+import EventsFilter from '@/components/events/EventsFilter'
 import Koru from '@/assets/recent_events_koru.png'
 import PlaceholderImg from '@/assets/placeholder_img.png'
 import KiwiBird from '@/assets/kiwiBird.svg'
@@ -34,6 +34,8 @@ export default function RecentEvents() {
         </h2>
       </div>
 
+      <EventsFilter />
+
       {/* Main Content */}
       <section
         className="relative w-full bg-[#13384E] px-6 pt-0 pb-12 overflow-x-hidden"
diff --git a/src/components/events/YearFilter.tsx b/src/components/events/YearFilter.tsx
index 8d37bcc..6dcafef 100644
--- a/src/components/events/YearFilter.tsx
+++ b/src/components/events/YearFilter.tsx
@@ -1,8 +1,8 @@
 export default function YearFilter() {
   return (
-    <div className="flex flex-row gap-10">
+    <div className="px-12 w-full justify-left flex flex-row gap-10">
       <p className="font-bold text-2xl">YEAR</p>
-      <div className="flex flex-row overflow-x-auto w-200 no-scrollbar gap-5">
+      <div className="flex flex-row overflow-x-auto max-w-[80-vw] no-scrollbar gap-5">
         <button className="font-bold text-2xl text-[#13384E] border-2 rounded-2xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
           2025
         </button>