diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx index dac2186..5c5f96d 100644 --- a/nextjs-app/components/SchoolRow.tsx +++ b/nextjs-app/components/SchoolRow.tsx @@ -9,7 +9,7 @@ */ import type { School } from '@/lib/types'; -import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge } from '@/lib/utils'; +import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange } from '@/lib/utils'; import styles from './SchoolRow.module.css'; interface SchoolRowProps { @@ -75,7 +75,7 @@ export function SchoolRow({ )} {school.school_type && {school.school_type}} - {school.age_range && {school.age_range}} + {school.age_range && {formatAgeRange(school.age_range)}} {showDenomination && {school.religious_denomination}} {showGender && {school.gender}} diff --git a/nextjs-app/components/SecondarySchoolDetailView.tsx b/nextjs-app/components/SecondarySchoolDetailView.tsx index 0fc33bb..0f9d87f 100644 --- a/nextjs-app/components/SecondarySchoolDetailView.tsx +++ b/nextjs-app/components/SecondarySchoolDetailView.tsx @@ -23,7 +23,7 @@ import type { SchoolAdmissions, SenDetail, Phonics, SchoolDeprivation, SchoolFinance, NationalAverages, } from '@/lib/types'; -import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils'; +import { formatPercentage, formatProgress, formatAcademicYear, formatAgeRange } from '@/lib/utils'; import { DeltaChip } from './DeltaChip'; import { track, getNavigationSource } from '@/lib/analytics'; import styles from './SecondarySchoolDetailView.module.css'; @@ -228,7 +228,7 @@ export function SecondarySchoolDetailView({ {schoolInfo.gender}'s school )} {schoolInfo.age_range && ( - {schoolInfo.age_range} + {formatAgeRange(schoolInfo.age_range)} )} {hasSixthForm && ( Sixth form diff --git a/nextjs-app/components/SecondarySchoolRow.tsx b/nextjs-app/components/SecondarySchoolRow.tsx index 7cf73f3..a302d6f 100644 --- a/nextjs-app/components/SecondarySchoolRow.tsx +++ b/nextjs-app/components/SecondarySchoolRow.tsx @@ -11,7 +11,7 @@ 'use client'; import type { School } from '@/lib/types'; -import { buildOfstedListBadge, getPhaseStyle, schoolUrl } from '@/lib/utils'; +import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange } from '@/lib/utils'; import styles from './SecondarySchoolRow.module.css'; function detectAdmissionsTag(school: School): string | null { @@ -84,7 +84,7 @@ export function SecondarySchoolRow({ )} {school.school_type && {school.school_type}} - {school.age_range && {school.age_range}} + {school.age_range && {formatAgeRange(school.age_range)}} {showGender && ( {school.gender} )} diff --git a/nextjs-app/lib/utils.ts b/nextjs-app/lib/utils.ts index 2f47c54..a696370 100644 --- a/nextjs-app/lib/utils.ts +++ b/nextjs-app/lib/utils.ts @@ -59,6 +59,18 @@ export function truncate(text: string, maxLength: number): string { return text.slice(0, maxLength).trim() + '...'; } +/** + * Format a school's age range for display, e.g. "3-11" → "Ages 3–11". + * Display-only — leaves the raw `age_range` field (used for sixth-form + * detection) untouched. Falls back to the raw value if it's not a plain range. + */ +export function formatAgeRange(ageRange: string | null | undefined): string { + if (!ageRange) return ''; + const match = ageRange.match(/^\s*(\d+)\s*[-–]\s*(\d+)\s*$/); + if (!match) return ageRange; + return `Ages ${match[1]}–${match[2]}`; +} + // ============================================================================ // Number Formatting // ============================================================================