59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, type ReactNode } from 'react';
|
||
|
|
import styles from './schoolSections.module.css';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The only interactive part of the primary admissions section, and the only
|
||
|
|
* client component in components/school/.
|
||
|
|
*
|
||
|
|
* Both views are always present in the DOM and visibility is toggled with the
|
||
|
|
* `hidden` attribute — matching the previous behaviour exactly — so the
|
||
|
|
* server-rendered markup passed in as yearView/trendView never ships as client
|
||
|
|
* JavaScript.
|
||
|
|
*
|
||
|
|
* It spans the header and the viewport because the segmented control sits
|
||
|
|
* inside .admissionsHeader beside the <h2> while the viewport is a sibling
|
||
|
|
* below it; wrapping only one would change the DOM the CSS depends on.
|
||
|
|
*/
|
||
|
|
export function AdmissionsViewToggle({
|
||
|
|
title,
|
||
|
|
subtitle,
|
||
|
|
trendLabel,
|
||
|
|
yearView,
|
||
|
|
trendView,
|
||
|
|
}: {
|
||
|
|
title: ReactNode;
|
||
|
|
subtitle: ReactNode;
|
||
|
|
trendLabel: string;
|
||
|
|
yearView: ReactNode;
|
||
|
|
trendView: ReactNode;
|
||
|
|
}) {
|
||
|
|
const [view, setView] = useState<'year' | 'trend'>('year');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className={styles.admissionsHeader}>
|
||
|
|
<h2 className={styles.sectionTitle}>{title}</h2>
|
||
|
|
<div className={styles.admissionsSeg} role="group" aria-label="Admissions view">
|
||
|
|
<button type="button" aria-pressed={view === 'year'} onClick={() => setView('year')}>
|
||
|
|
This year
|
||
|
|
</button>
|
||
|
|
<button type="button" aria-pressed={view === 'trend'} onClick={() => setView('trend')}>
|
||
|
|
{trendLabel}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{subtitle}
|
||
|
|
<div className={styles.admissionsViewport}>
|
||
|
|
<div className={styles.admissionsViewYear} hidden={view !== 'year'}>
|
||
|
|
{yearView}
|
||
|
|
</div>
|
||
|
|
<div className={styles.admissionsViewTrend} hidden={view !== 'trend'}>
|
||
|
|
{trendView}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|