50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
|
/**
|
||
|
|
* DistanceSection — "How far the last place went".
|
||
|
|
*
|
||
|
|
* Its own section rather than a third tab inside Admissions.
|
||
|
|
*
|
||
|
|
* It began as a tab, which broke the admissions card in a way worth recording:
|
||
|
|
* the two admissions views are stacked in one grid cell so switching them never
|
||
|
|
* shifts layout, which means the card is sized by its TALLEST view. A view
|
||
|
|
* carrying a chart, a table and a map came to 1402px against the tile grid's
|
||
|
|
* 316px, so the default view — the one nobody had clicked — rendered as four
|
||
|
|
* tiles adrift in ~1080px of blank card, and Admissions alone accounted for
|
||
|
|
* half the height of every section on the page.
|
||
|
|
*
|
||
|
|
* The structural point stands on its own though: every other topic here is a
|
||
|
|
* section with a nav entry, and "how close did we need to live, and would we
|
||
|
|
* have got in?" is a topic, not a variant reading of the intake figures. The
|
||
|
|
* headline number stays on the Admissions tile where the intake story is; the
|
||
|
|
* record behind it lives here.
|
||
|
|
*
|
||
|
|
* Server component; the map and postcode form carry their own client boundary.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import type { School, SchoolAdmissions, SchoolAdmissionDistance } from '@/lib/types';
|
||
|
|
import { Section, sectionStyles as styles } from './sectionShared';
|
||
|
|
import { CutoffDistanceDetail } from './CutoffDistanceDetail';
|
||
|
|
import { cutoffYearRows, hasCutoffDetail } from './lastDistanceOffered';
|
||
|
|
|
||
|
|
export function DistanceSection({
|
||
|
|
admissionDistanceHistory,
|
||
|
|
admissionsHistory,
|
||
|
|
schoolInfo,
|
||
|
|
}: {
|
||
|
|
admissionDistanceHistory: SchoolAdmissionDistance[];
|
||
|
|
admissionsHistory: SchoolAdmissions[];
|
||
|
|
schoolInfo: School;
|
||
|
|
}) {
|
||
|
|
const rows = cutoffYearRows(admissionDistanceHistory, admissionsHistory);
|
||
|
|
if (!hasCutoffDetail(rows)) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Section id="distance">
|
||
|
|
<h2 className={styles.sectionTitle}>How far the last place went</h2>
|
||
|
|
<p className={styles.sectionSubtitle}>
|
||
|
|
The distance of the furthest home offered a place each year, and how your
|
||
|
|
own address compares.
|
||
|
|
</p>
|
||
|
|
<CutoffDistanceDetail rows={rows} schoolInfo={schoolInfo} />
|
||
|
|
</Section>
|
||
|
|
);
|
||
|
|
}
|