TudorandClaude Opus 5
91314a80b5
Server-rendered cards inside a client carousel that scrolls rather than paginates, so all six links stay in the initial HTML and the row still works with JavaScript off. Three client islands, split by what each needs: a school, the whole selection, a DOM ref. The lede claims a similar intake only when no card came from tier 3, chips list what a school actually shares, a missing figure reads "Not published", and the neighbour's number carries no valence colour — green and terracotta mean "against England" everywhere else, and colouring it here would read as ranking the neighbours. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* The selection count and the one decisive action in the section.
|
|
*
|
|
* The CTA is a real link, not a handler: /compare already parses `urns` from
|
|
* the query string, so the hand-off needs no new compare plumbing. It counts
|
|
* this school plus whatever the reader ticked, because comparing a shortlist
|
|
* without the school they are looking at is not what they asked for.
|
|
*/
|
|
|
|
import Link from 'next/link';
|
|
import { useComparisonContext } from '@/context/ComparisonContext';
|
|
import type { SimilarSchool } from '@/lib/types';
|
|
import styles from './SimilarSchools.module.css';
|
|
|
|
export function SimilarSchoolsCompareBar({
|
|
thisUrn,
|
|
candidates,
|
|
}: {
|
|
thisUrn: number;
|
|
candidates: SimilarSchool[];
|
|
}) {
|
|
const { selectedSchools } = useComparisonContext();
|
|
|
|
// Only the schools this section offers, in the order the cards show them —
|
|
// the basket may hold schools picked up elsewhere on the site, and this bar
|
|
// speaks for this section.
|
|
const offered = candidates
|
|
.map((c) => c.urn)
|
|
.filter((urn) => selectedSchools.some((s) => s.urn === urn));
|
|
|
|
const count = offered.length;
|
|
const href = `/compare?urns=${[thisUrn, ...offered].join(',')}`;
|
|
|
|
return (
|
|
<div className={styles.footer}>
|
|
<p aria-live="polite">
|
|
<strong>
|
|
{count
|
|
? `${count} school${count === 1 ? '' : 's'} selected`
|
|
: 'Compare side by side'}
|
|
</strong>
|
|
{count
|
|
? 'This school is included automatically.'
|
|
: 'Add a school to compare it with this one.'}
|
|
</p>
|
|
{count ? (
|
|
<Link className={styles.compare} href={href}>
|
|
Compare {count + 1} schools →
|
|
</Link>
|
|
) : (
|
|
<span className={styles.compare} aria-disabled="true">
|
|
Compare →
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|