42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
|
/**
|
||
|
|
* LocalAreaSection — IDACI deprivation decile. Primary pages only.
|
||
|
|
*
|
||
|
|
* Server component.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import type { SchoolDeprivation } from '@/lib/types';
|
||
|
|
import { MetricTooltip } from '../MetricTooltip';
|
||
|
|
import { Section, sectionStyles as styles } from './sectionShared';
|
||
|
|
|
||
|
|
// Moved with this section from SchoolDetailView, its only consumer.
|
||
|
|
function deprivationDesc(decile: number) {
|
||
|
|
if (decile <= 3) return `This school is in one of England's most deprived areas (decile ${decile}/10). Many pupils may face additional challenges at home.`;
|
||
|
|
if (decile <= 7) return `This school is in an area with average levels of deprivation (decile ${decile}/10).`;
|
||
|
|
return `This school is in one of England's less deprived areas (decile ${decile}/10).`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function LocalAreaSection({ deprivation }: { deprivation: SchoolDeprivation }) {
|
||
|
|
return (
|
||
|
|
<Section id="local-area">
|
||
|
|
<h2 className={styles.sectionTitle}>
|
||
|
|
Local Area Context
|
||
|
|
<MetricTooltip metricKey="idaci_decile" />
|
||
|
|
</h2>
|
||
|
|
<div className={styles.deprivationDots}>
|
||
|
|
{Array.from({ length: 10 }, (_, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className={`${styles.deprivationDot} ${i < deprivation.idaci_decile! ? styles.deprivationDotFilled : ''}`}
|
||
|
|
title={`Decile ${i + 1}`}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className={styles.deprivationScaleLabel}>
|
||
|
|
<span>Most deprived</span>
|
||
|
|
<span>Least deprived</span>
|
||
|
|
</div>
|
||
|
|
<p className={styles.deprivationDesc}>{deprivationDesc(deprivation.idaci_decile!)}</p>
|
||
|
|
</Section>
|
||
|
|
);
|
||
|
|
}
|