Skip to content

Ht 92/events filter #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rubyckm wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Ht 92/events filter #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a910d1
feat: added base of events filter, and moved blue koru in past events…
rubyckm Sep 11, 2025
777237b
implemented filters for event type for both past and upcoming events
rubyckm Sep 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/components/events/EventsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
export default function EventsFilter() {
return (
<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>
)
}
22 changes: 22 additions & 0 deletions src/components/events/PastEventsFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
7 changes: 4 additions & 3 deletions src/components/events/PastEventsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -10,13 +11,13 @@ 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 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>
Expand Down
4 changes: 3 additions & 1 deletion src/components/events/RecentEvents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/components/events/YearFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down