feat(places): place page client and view component
One component for all four families: they differ in what fills the registry, not in what the page shows, so a second would be a second place to forget the same change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj
This commit is contained in:
TudorandClaude Opus 5 committed
1 parent
42138fc402
commit
de5e790112
4 files changed
+346
No files matched your search
@@ -0,0 +1,108 @@
|
||||
/* Tokens only — see globals.css. Matches RankingsView's conventions. */
|
||||
.container {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-display);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* The one number a list cannot give you, so it gets its own band. */
|
||||
.compare {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.875rem 1.125rem;
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ofsted {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.25rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Wide content scrolls in its own container so the page body never does. */
|
||||
.tableWrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.8125rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table th:last-child,
|
||||
.num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.neighbours {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.neighbours h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.75rem;
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
.neighbours ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* One place page, shared by all four families.
|
||||
*
|
||||
* They differ in what fills the registry, not in what the page shows, so a
|
||||
* second component would be a second place to forget the same change.
|
||||
*
|
||||
* The local-versus-England comparison is the reason this page is not a list:
|
||||
* it is the one number a parent cannot get by reading the schools one by one,
|
||||
* and it is what keeps the page from reading as a name dropped into a
|
||||
* template.
|
||||
*/
|
||||
import Link from 'next/link';
|
||||
import type { PlaceDetail, PlaceSummary } from '@/lib/places';
|
||||
import { placeUrl, authoritySlug } from '@/lib/places';
|
||||
import { schoolUrl } from '@/lib/utils';
|
||||
import styles from './PlaceView.module.css';
|
||||
|
||||
interface Props {
|
||||
detail: PlaceDetail;
|
||||
phase?: 'primary' | 'secondary';
|
||||
englandAverage: number | null;
|
||||
/** Nearby places, so the page links onward instead of dead-ending. */
|
||||
neighbours: PlaceSummary[];
|
||||
}
|
||||
|
||||
// Ofsted grades in the order they are reported.
|
||||
const OFSTED_LABELS: Array<[number, string]> = [
|
||||
[1, 'Outstanding'], [2, 'Good'],
|
||||
[3, 'Requires improvement'], [4, 'Inadequate'],
|
||||
];
|
||||
|
||||
export function PlaceView({ detail, phase, englandAverage, neighbours }: Props) {
|
||||
const { place, schools, averages } = detail;
|
||||
const metric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
|
||||
const local = averages[metric];
|
||||
const phaseWord = phase === 'secondary' ? 'Secondary schools'
|
||||
: phase === 'primary' ? 'Primary schools' : 'Schools';
|
||||
const graded = OFSTED_LABELS
|
||||
.map(([grade, label]) => [label, schools.filter((s) => s.ofsted_grade === grade).length] as const)
|
||||
.filter(([, n]) => n > 0);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<header className={styles.header}>
|
||||
<h1>{phaseWord} in {place.name}</h1>
|
||||
<p className={styles.summary}>
|
||||
{place.count} schools
|
||||
{place.parent_authority && (
|
||||
<>
|
||||
{' · '}
|
||||
<Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}>
|
||||
{place.parent_authority}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{local != null && englandAverage != null && (
|
||||
<p className={styles.compare} data-testid="local-vs-england">
|
||||
{place.name} averages <strong>{Math.round(local)}</strong> against{' '}
|
||||
<strong>{Math.round(englandAverage)}</strong> across England.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{graded.length > 0 && (
|
||||
<ul className={styles.ofsted} data-testid="ofsted-distribution">
|
||||
{graded.map(([label, n]) => (
|
||||
<li key={label}>{label}: <strong>{n}</strong></li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<div className={styles.tableWrap}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>School</th>
|
||||
<th>{phase === 'secondary' ? 'Attainment 8' : 'RWM expected'}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{schools.map((s) => (
|
||||
<tr key={s.urn}>
|
||||
<td>
|
||||
<Link href={schoolUrl(s.urn, s.school_name)}>{s.school_name}</Link>
|
||||
</td>
|
||||
<td className={styles.num}>
|
||||
{s[metric] == null ? '—' : Math.round(Number(s[metric]))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{neighbours.length > 0 && (
|
||||
<nav className={styles.neighbours} aria-label="Nearby places">
|
||||
<h2>Nearby</h2>
|
||||
<ul>
|
||||
{neighbours.map((n) => (
|
||||
<li key={n.kind + n.slug}>
|
||||
<Link href={placeUrl(n.kind, n.slug)}>{n.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user