function ProvincesSection() {
const mobile = useMobile();
return (
{PROVINCES.map((p, i) =>
)}
);
}
function ProvinceCol({ p, i }) {
const [hover, setHover] = useState(false);
const notes = {
CS: "Sila, Pollino, l'Arberia, la Valle del Crati",
CZ: "Il capoluogo, Roccelletta, il golfo di Squillace",
RC: "Aspromonte, Area Grecanica, Costa Viola",
KR: "Capo Rizzuto, la Magna Grecia, Santa Severina",
VV: "Costa degli Dei, Serre, Tropea e Pizzo",
};
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
padding: "40px 24px 32px",
borderRight: "1px solid var(--line)",
borderBottom: "1px solid var(--line)",
position: "relative", display: "block", minHeight: 300,
background: hover ? "var(--paper-2)" : "transparent",
transition: "background .25s",
}}>
0{i + 1} / 05
{p.code}
{p.name}
{notes[p.code]}
);
}
window.ProvincesSection = ProvincesSection;