ListTableStats.tsx
43 lines
| 1 | import StatWidget from "@givewp/admin/components/StatWidget"; |
| 2 | import { __ } from "@wordpress/i18n"; |
| 3 | import styles from "./styles.module.scss"; |
| 4 | |
| 5 | /** |
| 6 | * @since 4.10.0 |
| 7 | */ |
| 8 | export type StatConfig = { |
| 9 | label: string; |
| 10 | upgrade?: { |
| 11 | href: string; |
| 12 | tooltip: string; |
| 13 | }; |
| 14 | }; |
| 15 | |
| 16 | /** |
| 17 | * @since 4.10.0 |
| 18 | */ |
| 19 | type ListTableStatsProps = { |
| 20 | config: Record<string, StatConfig>; |
| 21 | values: Record<string, number>; |
| 22 | }; |
| 23 | |
| 24 | /** |
| 25 | * @since 4.10.0 |
| 26 | */ |
| 27 | export default function ListTableStats({config, values}: ListTableStatsProps) { |
| 28 | return ( |
| 29 | <section className={styles.tableStatsContainer} role="region" aria-label={__('Donation statistics', 'give')}> |
| 30 | {Object.entries(config) |
| 31 | .filter(([key]) => Object.keys(values).includes(key)) |
| 32 | .map(([key, statConfig]) => ( |
| 33 | <StatWidget |
| 34 | key={key} |
| 35 | className={styles.tableStatWidget} |
| 36 | {...statConfig} |
| 37 | value={values?.[key] ?? 0} |
| 38 | /> |
| 39 | ))} |
| 40 | </section> |
| 41 | ); |
| 42 | } |
| 43 |