From 8296aca9018d09ad8effaa2d57572b4f1e85cc21 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Thu, 7 May 2026 13:15:41 +1200 Subject: [PATCH 01/20] feat: added pages and basic layout for faqs section --- src/app/(frontend)/components/FAQItem.tsx | 3 ++- src/app/(frontend)/components/FAQSection.tsx | 3 ++- src/app/(frontend)/join-ayo/page.tsx | 1 - 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/(frontend)/components/FAQItem.tsx b/src/app/(frontend)/components/FAQItem.tsx index 61e0a44..bb872b4 100644 --- a/src/app/(frontend)/components/FAQItem.tsx +++ b/src/app/(frontend)/components/FAQItem.tsx @@ -9,6 +9,7 @@ const FAQItem = ({ question, answer }: FAQItemProps) => {

{question}

+ { -

{answer}

+

{answer}

) } diff --git a/src/app/(frontend)/components/FAQSection.tsx b/src/app/(frontend)/components/FAQSection.tsx index b82e9e9..a26c981 100644 --- a/src/app/(frontend)/components/FAQSection.tsx +++ b/src/app/(frontend)/components/FAQSection.tsx @@ -1,6 +1,5 @@ import FAQItem from './FAQItem' -// Sample FAQ data to be replaced with actual FAQs const faqData = [ { id: 1, @@ -52,11 +51,13 @@ const FAQSection = () => {

FAQs

+
{faqData.map((item) => ( ))}
+
) diff --git a/src/app/(frontend)/join-ayo/page.tsx b/src/app/(frontend)/join-ayo/page.tsx index 70e9e10..0406f53 100644 --- a/src/app/(frontend)/join-ayo/page.tsx +++ b/src/app/(frontend)/join-ayo/page.tsx @@ -3,7 +3,6 @@ import FAQSection from '../components/FAQSection' export default function JoinAyoPage() { return (
- {/*

This is the join AYO page

*/}
) From 2f8e524ab70d25a339d81a07f041c3b7638564ce Mon Sep 17 00:00:00 2001 From: MaanasNegi Date: Wed, 13 May 2026 13:24:29 +1200 Subject: [PATCH 02/20] feat: made branch for opportunity section --- .../components/OpportunitySection.tsx | 44 ++++++++++++++ .../components/OpportunityTable.tsx | 57 +++++++++++++++++++ 2 files changed, 101 insertions(+) create mode 100644 src/app/(frontend)/components/OpportunitySection.tsx create mode 100644 src/app/(frontend)/components/OpportunityTable.tsx diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx new file mode 100644 index 0000000..768d5c9 --- /dev/null +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -0,0 +1,44 @@ +import OpportunityTable from './OpportunityTable' + +const opportunities = [ + { + id: 1, + title: 'Lodge of the Liberal Arts: Howard Wyatt Memorial Scholarship', + deadlineLabel: '20th of May, 11:59pm NZST', + description: + 'The Freemasons of Lodge No.500 have established a trust for charitable purposes, to assist young musicians in their education. Scholarships totalling $3,000 are granted each year to members of AYO who have shown outstanding...', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 2, + title: 'Chip and Muriel Stevens Award', + deadlineLabel: '20th of May, 11:59pm NZST', + description: + 'This $1,500 award is dedicated to the memory of a former Chairman of AYO, N.W. (Chip) Stevens, who spent his lifetime encouraging young people to love music and young musicians to reach their full potential.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 3, + title: 'AYO Soloist Competition', + deadlineLabel: '15th of August, 11:59pm NZST', + description: + 'The AYO Soloist Competition offers existing orchestra members the chance to compete for monetary prizes and a concerto appearance with the orchestra. The orchestra showcases young soloists and composers; it...', + readMoreUrl: '#', + applyUrl: '#', + }, + // Need to figure out how the urls for the applyUrl and readMoreUrl work. Also some descriptions in the figma are incomplete so these are just current placeholders +] + +export default function OpportunitySection() { + return ( +
+

Opportunities

+

+ There are a range of opportunities we offer, exclusively to AYO players. +

+ +
+ ) +} diff --git a/src/app/(frontend)/components/OpportunityTable.tsx b/src/app/(frontend)/components/OpportunityTable.tsx new file mode 100644 index 0000000..fbfc561 --- /dev/null +++ b/src/app/(frontend)/components/OpportunityTable.tsx @@ -0,0 +1,57 @@ +type Opportunity = { + id: number + title: string + deadlineLabel: string + description: string + readMoreUrl: string + applyUrl: string +} + +type OpportunityTableProps = { + opportunities: Opportunity[] +} + +// Rendering one row +const OpportunityRow = ({ + title, + deadlineLabel, + description, + readMoreUrl, + applyUrl, +}: Opportunity) => { + return ( +
+
+

{title}

+

Apply by {deadlineLabel}

+
+

{description}

+
+ + Read More + + + Apply + +
+
+ ) +} + +// Need to also add an svg of an arrow that goes next to the Apply url + +// Whole table is rendered row by row +const OpportunityTable = ({ opportunities }: OpportunityTableProps) => { + return ( +
+ {opportunities.map((opp, index) => ( +
+ {index > 0 &&
} + +
+ ))} +
+ ) +} + +export default OpportunityTable From f0e2d26074ec4266d569ae0c32e0b9e281268bca Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 14:17:13 +1200 Subject: [PATCH 03/20] fix: added section back to page after rebase with main --- src/app/(frontend)/join-ayo/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/(frontend)/join-ayo/page.tsx b/src/app/(frontend)/join-ayo/page.tsx index 0406f53..989bfd8 100644 --- a/src/app/(frontend)/join-ayo/page.tsx +++ b/src/app/(frontend)/join-ayo/page.tsx @@ -1,8 +1,10 @@ import FAQSection from '../components/FAQSection' +import OpportunitySection from '../components/OpportunitySection' export default function JoinAyoPage() { return (
+
) From 79b5fb63189da35588e2f85e5d32c491772e35f8 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 14:33:43 +1200 Subject: [PATCH 04/20] feat: added opportunies available number --- src/app/(frontend)/components/OpportunitySection.tsx | 3 +++ src/app/(frontend)/join-ayo/page.tsx | 2 ++ 2 files changed, 5 insertions(+) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index 768d5c9..809ff54 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -38,6 +38,9 @@ export default function OpportunitySection() {

There are a range of opportunities we offer, exclusively to AYO players.

+

+ Showing {opportunities.length} opportunities +

) diff --git a/src/app/(frontend)/join-ayo/page.tsx b/src/app/(frontend)/join-ayo/page.tsx index 989bfd8..07299c8 100644 --- a/src/app/(frontend)/join-ayo/page.tsx +++ b/src/app/(frontend)/join-ayo/page.tsx @@ -1,10 +1,12 @@ import FAQSection from '../components/FAQSection' import OpportunitySection from '../components/OpportunitySection' +import OpportunityModal from '../components/OpportunityModal' export default function JoinAyoPage() { return (
+ {/* */}
) From bf08be051a9828c4f2a7a245da450b22634dc47d Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 14:36:05 +1200 Subject: [PATCH 05/20] feat: added header for opportunities table --- .../components/OpportunitySection.tsx | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index 809ff54..f5ea5a5 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -38,9 +38,35 @@ export default function OpportunitySection() {

There are a range of opportunities we offer, exclusively to AYO players.

-

- Showing {opportunities.length} opportunities -

+ + {/* Header for table */} +
+ {/* Type */} +
+ Type + All +
+ + {/* Sort */} +
+ Sort by + Closing Date +
+ + {/* Show */} +
+ Show + 5 +
+ + {/* Right aligned count */} + + Showing {opportunities.length} opportunities + +
+ +
+ ) From 103938f06a7b60763f233d258927b5a54483d1b6 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 14:46:08 +1200 Subject: [PATCH 06/20] feat: added sorting/date logic --- .../components/OpportunitySection.tsx | 77 +++++++++++-------- 1 file changed, 45 insertions(+), 32 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index f5ea5a5..f05ddc8 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -1,37 +1,50 @@ -import OpportunityTable from './OpportunityTable' +'use client' -const opportunities = [ - { - id: 1, - title: 'Lodge of the Liberal Arts: Howard Wyatt Memorial Scholarship', - deadlineLabel: '20th of May, 11:59pm NZST', - description: - 'The Freemasons of Lodge No.500 have established a trust for charitable purposes, to assist young musicians in their education. Scholarships totalling $3,000 are granted each year to members of AYO who have shown outstanding...', - readMoreUrl: '#', - applyUrl: '#', - }, - { - id: 2, - title: 'Chip and Muriel Stevens Award', - deadlineLabel: '20th of May, 11:59pm NZST', - description: - 'This $1,500 award is dedicated to the memory of a former Chairman of AYO, N.W. (Chip) Stevens, who spent his lifetime encouraging young people to love music and young musicians to reach their full potential.', - readMoreUrl: '#', - applyUrl: '#', - }, - { - id: 3, - title: 'AYO Soloist Competition', - deadlineLabel: '15th of August, 11:59pm NZST', - description: - 'The AYO Soloist Competition offers existing orchestra members the chance to compete for monetary prizes and a concerto appearance with the orchestra. The orchestra showcases young soloists and composers; it...', - readMoreUrl: '#', - applyUrl: '#', - }, - // Need to figure out how the urls for the applyUrl and readMoreUrl work. Also some descriptions in the figma are incomplete so these are just current placeholders -] +import OpportunityTable from './OpportunityTable' +import { useState, useMemo } from 'react' export default function OpportunitySection() { + const [sortOrder, setSortOrder] = useState<'asc'>('asc') + const opportunities = [ + { + id: 1, + title: 'Lodge of the Liberal Arts: Howard Wyatt Memorial Scholarship', + deadlineLabel: '20th of May, 11:59pm NZST', + deadlineDate: '2026-05-20T23:59:00+12:00', + description: + 'The Freemasons of Lodge No.500 have established a trust for charitable purposes, to assist young musicians in their education. Scholarships totalling $3,000 are granted each year to members of AYO who have shown outstanding...', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 2, + title: 'Chip and Muriel Stevens Award', + deadlineLabel: '20th of May, 11:59pm NZST', + deadlineDate: '2026-05-20T23:59:00+12:00', + description: + 'This $1,500 award is dedicated to the memory of a former Chairman of AYO, N.W. (Chip) Stevens, who spent his lifetime encouraging young people to love music and young musicians to reach their full potential.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 3, + title: 'AYO Soloist Competition', + deadlineLabel: '15th of August, 11:59pm NZST', + deadlineDate: '2026-08-15T23:59:00+12:00', + description: + 'The AYO Soloist Competition offers existing orchestra members the chance to compete for monetary prizes and a concerto appearance with the orchestra. The orchestra showcases young soloists and composers; it...', + readMoreUrl: '#', + applyUrl: '#', + }, + // Need to figure out how the urls for the applyUrl and readMoreUrl work. Also some descriptions in the figma are incomplete so these are just current placeholders + ] + + const sortedOpportunities = useMemo(() => { + return [...opportunities].sort((a, b) => { + return new Date(a.deadlineDate).getTime() - new Date(b.deadlineDate).getTime() + }) + }, [opportunities]) + return (

Opportunities

@@ -67,7 +80,7 @@ export default function OpportunitySection() {
- +
) } From 5a479b161020b622165f751b31d89fc3f1089933 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 14:46:51 +1200 Subject: [PATCH 07/20] fix: edited table to match sorting logic --- src/app/(frontend)/components/OpportunityTable.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/(frontend)/components/OpportunityTable.tsx b/src/app/(frontend)/components/OpportunityTable.tsx index fbfc561..c0c0f7a 100644 --- a/src/app/(frontend)/components/OpportunityTable.tsx +++ b/src/app/(frontend)/components/OpportunityTable.tsx @@ -2,6 +2,7 @@ type Opportunity = { id: number title: string deadlineLabel: string + deadlineDate: string description: string readMoreUrl: string applyUrl: string @@ -15,6 +16,7 @@ type OpportunityTableProps = { const OpportunityRow = ({ title, deadlineLabel, + deadlineDate, description, readMoreUrl, applyUrl, From 9aff72d646114a8661cb4ae5466fc99a97d59f05 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 16:30:38 +1200 Subject: [PATCH 08/20] feat: connected existing modal to table with read more button --- .../components/OpportunityTable.tsx | 46 +++++++++++++++---- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/src/app/(frontend)/components/OpportunityTable.tsx b/src/app/(frontend)/components/OpportunityTable.tsx index c0c0f7a..ef4293c 100644 --- a/src/app/(frontend)/components/OpportunityTable.tsx +++ b/src/app/(frontend)/components/OpportunityTable.tsx @@ -1,3 +1,8 @@ +'use client' + +import { useState } from 'react' +import OpportunityModal from './OpportunityModal' + type Opportunity = { id: number title: string @@ -12,26 +17,33 @@ type OpportunityTableProps = { opportunities: Opportunity[] } -// Rendering one row +type OpportunityRowProps = Opportunity & { + onReadMore: () => void +} + +// Row component const OpportunityRow = ({ title, deadlineLabel, - deadlineDate, description, readMoreUrl, applyUrl, -}: Opportunity) => { + onReadMore, +}: OpportunityRowProps) => { return (

{title}

Apply by {deadlineLabel}

+

{description}

+
- + + Apply @@ -40,18 +52,32 @@ const OpportunityRow = ({ ) } -// Need to also add an svg of an arrow that goes next to the Apply url - -// Whole table is rendered row by row +// Table component const OpportunityTable = ({ opportunities }: OpportunityTableProps) => { + const [selectedOpp, setSelectedOpp] = useState(null) + return ( -
+
{opportunities.map((opp, index) => (
{index > 0 &&
} - + + setSelectedOpp(opp)} />
))} + + {/* Modal */} + {selectedOpp && ( + setSelectedOpp(null)} + /> + )}
) } From 4c2f2ecf5cf45aeee1cd07eec1acecd005e3bff1 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 16:46:35 +1200 Subject: [PATCH 09/20] feat: added colour for hover on table rows --- src/app/(frontend)/components/OpportunityTable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(frontend)/components/OpportunityTable.tsx b/src/app/(frontend)/components/OpportunityTable.tsx index ef4293c..bf06453 100644 --- a/src/app/(frontend)/components/OpportunityTable.tsx +++ b/src/app/(frontend)/components/OpportunityTable.tsx @@ -31,7 +31,7 @@ const OpportunityRow = ({ onReadMore, }: OpportunityRowProps) => { return ( -
+

{title}

Apply by {deadlineLabel}

@@ -44,8 +44,8 @@ const OpportunityRow = ({ Read More - - Apply + + Apply↗
From 21e51cc28e3d35b25fa2291a447162acc825cf4b Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 17:00:56 +1200 Subject: [PATCH 10/20] feat: added logic for type and sort by buttons on header --- .../components/OpportunitySection.tsx | 139 ++++++++++++------ .../components/OpportunityTable.tsx | 11 +- 2 files changed, 95 insertions(+), 55 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index f05ddc8..db42e01 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -1,80 +1,121 @@ 'use client' +import { useMemo, useState } from 'react' import OpportunityTable from './OpportunityTable' -import { useState, useMemo } from 'react' + +const opportunities = [ + { + id: 1, + type: 'Scholarship', + title: 'Lodge of the Liberal Arts: Howard Wyatt Memorial Scholarship', + deadlineLabel: '20th of May, 11:59pm NZST', + deadlineDate: '2026-05-20T23:59:00+12:00', + description: + 'The Freemasons of Lodge No.500 have established a trust for charitable purposes, to assist young musicians in their education. Scholarships totalling $3,000 are granted each year to members of AYO who have shown outstanding...', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 2, + type: 'Scholarship', + title: 'Chip and Muriel Stevens Award', + deadlineLabel: '20th of May, 11:59pm NZST', + deadlineDate: '2026-05-20T23:59:00+12:00', + description: + 'This $1,500 award is dedicated to the memory of a former Chairman of AYO, N.W. (Chip) Stevens, who spent his lifetime encouraging young people to love music and young musicians to reach their full potential.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 3, + type: 'Competition', + title: 'AYO Soloist Competition', + deadlineLabel: '15th of August, 11:59pm NZST', + deadlineDate: '2026-08-15T23:59:00+12:00', + description: + 'The AYO Soloist Competition offers existing orchestra members the chance to compete for monetary prizes and a concerto appearance with the orchestra. The orchestra showcases young soloists and composers; it...', + readMoreUrl: '#', + applyUrl: '#', + }, +] export default function OpportunitySection() { - const [sortOrder, setSortOrder] = useState<'asc'>('asc') - const opportunities = [ - { - id: 1, - title: 'Lodge of the Liberal Arts: Howard Wyatt Memorial Scholarship', - deadlineLabel: '20th of May, 11:59pm NZST', - deadlineDate: '2026-05-20T23:59:00+12:00', - description: - 'The Freemasons of Lodge No.500 have established a trust for charitable purposes, to assist young musicians in their education. Scholarships totalling $3,000 are granted each year to members of AYO who have shown outstanding...', - readMoreUrl: '#', - applyUrl: '#', - }, - { - id: 2, - title: 'Chip and Muriel Stevens Award', - deadlineLabel: '20th of May, 11:59pm NZST', - deadlineDate: '2026-05-20T23:59:00+12:00', - description: - 'This $1,500 award is dedicated to the memory of a former Chairman of AYO, N.W. (Chip) Stevens, who spent his lifetime encouraging young people to love music and young musicians to reach their full potential.', - readMoreUrl: '#', - applyUrl: '#', - }, - { - id: 3, - title: 'AYO Soloist Competition', - deadlineLabel: '15th of August, 11:59pm NZST', - deadlineDate: '2026-08-15T23:59:00+12:00', - description: - 'The AYO Soloist Competition offers existing orchestra members the chance to compete for monetary prizes and a concerto appearance with the orchestra. The orchestra showcases young soloists and composers; it...', - readMoreUrl: '#', - applyUrl: '#', - }, - // Need to figure out how the urls for the applyUrl and readMoreUrl work. Also some descriptions in the figma are incomplete so these are just current placeholders - ] + const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc') + const [selectedType, setSelectedType] = useState('All') + + // Dynamically generate available types + const opportunityTypes = ['All', ...new Set(opportunities.map((opp) => opp.type))] + // Filter opportunities + const filteredOpportunities = + selectedType === 'All' + ? opportunities + : opportunities.filter((opp) => opp.type === selectedType) + + // Sort opportunities const sortedOpportunities = useMemo(() => { - return [...opportunities].sort((a, b) => { - return new Date(a.deadlineDate).getTime() - new Date(b.deadlineDate).getTime() + return [...filteredOpportunities].sort((a, b) => { + return sortOrder === 'asc' + ? new Date(a.deadlineDate).getTime() - new Date(b.deadlineDate).getTime() + : new Date(b.deadlineDate).getTime() - new Date(a.deadlineDate).getTime() }) - }, [opportunities]) + }, [filteredOpportunities, sortOrder]) return (

Opportunities

+

There are a range of opportunities we offer, exclusively to AYO players.

- {/* Header for table */} -
- {/* Type */} + {/* Controls */} +
+ {/* Type Filter */}
- Type - All + + +
{/* Sort */}
- Sort by - Closing Date + + +
{/* Show */}
- Show - 5 + + +
- {/* Right aligned count */} + {/* Count */} - Showing {opportunities.length} opportunities + Showing {sortedOpportunities.length} opportunities
diff --git a/src/app/(frontend)/components/OpportunityTable.tsx b/src/app/(frontend)/components/OpportunityTable.tsx index bf06453..4b59b7e 100644 --- a/src/app/(frontend)/components/OpportunityTable.tsx +++ b/src/app/(frontend)/components/OpportunityTable.tsx @@ -5,6 +5,7 @@ import OpportunityModal from './OpportunityModal' type Opportunity = { id: number + type: string title: string deadlineLabel: string deadlineDate: string @@ -21,12 +22,10 @@ type OpportunityRowProps = Opportunity & { onReadMore: () => void } -// Row component const OpportunityRow = ({ title, deadlineLabel, description, - readMoreUrl, applyUrl, onReadMore, }: OpportunityRowProps) => { @@ -34,25 +33,25 @@ const OpportunityRow = ({

{title}

+

Apply by {deadlineLabel}

{description}

- ) } -// Table component const OpportunityTable = ({ opportunities }: OpportunityTableProps) => { const [selectedOpp, setSelectedOpp] = useState(null) @@ -70,7 +69,7 @@ const OpportunityTable = ({ opportunities }: OpportunityTableProps) => { {selectedOpp && ( Date: Wed, 13 May 2026 17:19:48 +1200 Subject: [PATCH 11/20] feat: edited show button logic and edited showing opportunities to be dynamic --- .../components/OpportunitySection.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index db42e01..544dcb3 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -42,6 +42,7 @@ const opportunities = [ export default function OpportunitySection() { const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc') const [selectedType, setSelectedType] = useState('All') + const [showCount, setShowCount] = useState(5) // Dynamically generate available types const opportunityTypes = ['All', ...new Set(opportunities.map((opp) => opp.type))] @@ -106,22 +107,27 @@ export default function OpportunitySection() {
- setShowCount(Number(e.target.value))} + className="font-semibold text-black bg-transparent outline-none" + > + + +
{/* Count */} - Showing {sortedOpportunities.length} opportunities + Showing {Math.min(showCount, sortedOpportunities.length)} of {sortedOpportunities.length}{' '} + opportunities
- +
) } From de58bbeb7952fef08753111ab10995f26f0f4c9c Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 17:20:57 +1200 Subject: [PATCH 12/20] chore: extended fake opportunities list for testing --- .../components/OpportunitySection.tsx | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index 544dcb3..7f8ea33 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -37,6 +37,83 @@ const opportunities = [ readMoreUrl: '#', applyUrl: '#', }, + { + id: 4, + type: 'Scholarship', + title: 'AYO International Performance Grant', + deadlineLabel: '1st of June, 11:59pm NZST', + deadlineDate: '2026-06-01T23:59:00+12:00', + description: + 'Supports orchestra members travelling internationally for advanced musical training and performance opportunities.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 5, + type: 'Competition', + title: 'Emerging Composer Competition', + deadlineLabel: '10th of July, 11:59pm NZST', + deadlineDate: '2026-07-10T23:59:00+12:00', + description: + 'Young composers are invited to submit original orchestral works for adjudication and potential live performance.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 6, + type: 'Workshop', + title: 'Conducting Masterclass Programme', + deadlineLabel: '5th of June, 11:59pm NZST', + deadlineDate: '2026-06-05T23:59:00+12:00', + description: + 'A practical workshop series led by professional conductors focusing on rehearsal technique, score preparation, and ensemble leadership.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 7, + type: 'Scholarship', + title: 'Regional Music Development Scholarship', + deadlineLabel: '25th of May, 11:59pm NZST', + deadlineDate: '2026-05-25T23:59:00+12:00', + description: + 'Financial assistance for students from regional communities pursuing advanced orchestral studies.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 8, + type: 'Competition', + title: 'Chamber Ensemble Showcase', + deadlineLabel: '30th of September, 11:59pm NZST', + deadlineDate: '2026-09-30T23:59:00+12:00', + description: + 'Small ensembles compete for performance opportunities during the annual AYO concert season.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 9, + type: 'Residency', + title: 'Composer-in-Residence Programme', + deadlineLabel: '18th of August, 11:59pm NZST', + deadlineDate: '2026-08-18T23:59:00+12:00', + description: + 'Selected applicants will collaborate directly with the orchestra over a six-month residency period developing new compositions.', + readMoreUrl: '#', + applyUrl: '#', + }, + { + id: 10, + type: 'Workshop', + title: 'Advanced Audition Preparation Intensive', + deadlineLabel: '12th of June, 11:59pm NZST', + deadlineDate: '2026-06-12T23:59:00+12:00', + description: + 'An intensive coaching programme helping musicians prepare orchestral excerpts, solo repertoire, and audition strategies.', + readMoreUrl: '#', + applyUrl: '#', + }, ] export default function OpportunitySection() { From 7a009286c11196e4be37b15fc0efc5e73d9ac455 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Wed, 13 May 2026 17:27:32 +1200 Subject: [PATCH 13/20] fix: fixed spacing and padding to match figma --- .../components/OpportunitySection.tsx | 124 +++++++++--------- 1 file changed, 63 insertions(+), 61 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index 7f8ea33..951016f 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -140,71 +140,73 @@ export default function OpportunitySection() { }, [filteredOpportunities, sortOrder]) return ( -
-

Opportunities

- -

- There are a range of opportunities we offer, exclusively to AYO players. -

- - {/* Controls */} -
- {/* Type Filter */} -
- - - +
+
+

Opportunities

+ +

+ There are a range of opportunities we offer, exclusively to AYO players. +

+ + {/* Controls */} +
+ {/* Type Filter */} +
+ + + +
+ + {/* Sort */} +
+ + + +
+ + {/* Show */} +
+ + + +
+ + {/* Count */} + + Showing {Math.min(showCount, sortedOpportunities.length)} of{' '} + {sortedOpportunities.length} opportunities +
- {/* Sort */} -
- - - -
- - {/* Show */} -
- - - -
+
- {/* Count */} - - Showing {Math.min(showCount, sortedOpportunities.length)} of {sortedOpportunities.length}{' '} - opportunities - +
- -
- -
) } From a17a7b20b8894273b9f961a3c722cb602f0d98b5 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Thu, 14 May 2026 10:50:37 +1200 Subject: [PATCH 14/20] fead: add pagination controls in UI --- src/app/(frontend)/components/OpportunitySection.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index 951016f..e4f3bb8 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -206,6 +206,15 @@ export default function OpportunitySection() {
+ +
+
+ + +
+ + 1 of 1 +
) From bc91c858dae5ac6ed039dd4cacec25170041ab78 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Thu, 14 May 2026 11:55:37 +1200 Subject: [PATCH 15/20] feat: added pagination logic to buttons --- .../components/OpportunitySection.tsx | 71 +++++++++++++------ 1 file changed, 51 insertions(+), 20 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index e4f3bb8..0185a14 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -1,6 +1,6 @@ 'use client' -import { useMemo, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import OpportunityTable from './OpportunityTable' const opportunities = [ @@ -120,6 +120,7 @@ export default function OpportunitySection() { const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc') const [selectedType, setSelectedType] = useState('All') const [showCount, setShowCount] = useState(5) + const [currentPage, setCurrentPage] = useState(1) // Dynamically generate available types const opportunityTypes = ['All', ...new Set(opportunities.map((opp) => opp.type))] @@ -139,20 +140,33 @@ export default function OpportunitySection() { }) }, [filteredOpportunities, sortOrder]) + // Reset page when controls change + useEffect(() => { + setCurrentPage(1) + }, [selectedType, sortOrder, showCount]) + + // Pagination + const totalPages = Math.ceil(sortedOpportunities.length / showCount) + + const paginatedOpportunities = sortedOpportunities.slice( + (currentPage - 1) * showCount, + currentPage * showCount, + ) + return (
-
-

Opportunities

+
+

Opportunities

-

+

There are a range of opportunities we offer, exclusively to AYO players.

{/* Controls */} -
- {/* Type Filter */} +
+ {/* Type */}
- + - +
{/* Count */} - - Showing {Math.min(showCount, sortedOpportunities.length)} of{' '} - {sortedOpportunities.length} opportunities + + Showing {paginatedOpportunities.length}{' '} + {paginatedOpportunities.length === 1 ? 'opportunity' : 'opportunities'}
-
+
- + {/* Table */} + -
-
- - + {/* Pagination */} +
+
+ + +
- 1 of 1 + + {currentPage} of {totalPages} +
From 28688ad7d659945056de6c3d80f9bc7fd084a6e3 Mon Sep 17 00:00:00 2001 From: twkavya004 Date: Thu, 14 May 2026 11:57:46 +1200 Subject: [PATCH 16/20] fix: removed arrow appearence on dropdowns to match figma --- src/app/(frontend)/components/OpportunitySection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(frontend)/components/OpportunitySection.tsx b/src/app/(frontend)/components/OpportunitySection.tsx index 0185a14..4f150d8 100644 --- a/src/app/(frontend)/components/OpportunitySection.tsx +++ b/src/app/(frontend)/components/OpportunitySection.tsx @@ -171,7 +171,7 @@ export default function OpportunitySection() { setSortOrder(e.target.value as 'asc' | 'desc')} - className="font-semibold text-black bg-transparent outline-none" + className="font-semibold text-black bg-transparent outline-none appearance-none cursor-pointer pr-4" > @@ -202,7 +202,7 @@ export default function OpportunitySection() {