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>
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* The per-card basket toggle.
|
|
*
|
|
* The links around it are server-rendered, so the section works with JS off;
|
|
* this adds the basket interaction on top rather than being what makes the
|
|
* section function.
|
|
*/
|
|
|
|
import { useComparisonContext } from '@/context/ComparisonContext';
|
|
import type { School, SimilarSchool } from '@/lib/types';
|
|
import styles from './SimilarSchools.module.css';
|
|
|
|
export function AddToCompareButton({ school }: { school: SimilarSchool }) {
|
|
const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
|
|
const selected = selectedSchools.some((s) => s.urn === school.urn);
|
|
|
|
const toggle = () => {
|
|
if (selected) {
|
|
removeSchool(school.urn);
|
|
return;
|
|
}
|
|
// The basket only needs identity and display fields; the compare page
|
|
// fetches everything it renders by URN.
|
|
addSchool({
|
|
urn: school.urn,
|
|
school_name: school.school_name,
|
|
school_type: school.school_type,
|
|
age_range: school.age_range,
|
|
} as School);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={styles.add}
|
|
onClick={toggle}
|
|
aria-pressed={selected}
|
|
>
|
|
{selected ? '✓ Added to compare' : '+ Add to compare'}
|
|
<span className={styles.srOnly}> — {school.school_name}</span>
|
|
</button>
|
|
);
|
|
}
|