| 1 |
/** |
| 2 |
* The five figures, as tiles. |
| 3 |
* |
| 4 |
* Each is a link, not just a number: a count you cannot act on is trivia, so |
| 5 |
* every tile opens the list it describes. |
| 6 |
*/ |
| 7 |
|
| 8 |
import Icon from "./Icon"; |
| 9 |
|
| 10 |
export default function StatTiles({ items }) { |
| 11 |
return ( |
| 12 |
<div className="subscrpt-tiles"> |
| 13 |
{items.map((item) => ( |
| 14 |
<a key={item.key} className={`subscrpt-tile${item.tone ? ` is-${item.tone}` : ""}`} href={item.url}> |
| 15 |
<span className="subscrpt-tile__icon"> |
| 16 |
<Icon name={item.icon} /> |
| 17 |
</span> |
| 18 |
<span className="subscrpt-tile__value">{new Intl.NumberFormat().format(item.value)}</span> |
| 19 |
<span className="subscrpt-tile__label">{item.label}</span> |
| 20 |
</a> |
| 21 |
))} |
| 22 |
</div> |
| 23 |
); |
| 24 |
} |
| 25 |
|
