give / src / Campaigns / resources / admin / components / CampaignDetailsPage / Components / CampaignStats / StatWidget.tsx

StatWidget.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.17.0, at src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/CampaignStats/StatWidget.tsx

30 lines 1016 B

Raw Download Zip

1	import styles from './styles.module.scss';
2	import PercentChangePill from './PercentChangePill';
3	import HeaderText from '../HeaderText';
4	import type {StatWidgetProps} from './types';
5	import {Spinner} from '@givewp/components';
6
7	/**
8	* @since 4.0.0
9	*/
10	const StatWidget = ({label, value, previousValue, description, formatter = null, loading = false}: StatWidgetProps) => {
11	return (
12	<div className={styles.statWidget}>
13	<header>
14	<HeaderText>{label}</HeaderText>
15	</header>
16	<div className={styles.statWidgetAmount}>
17	<div className={styles.statWidgetDisplay}>
18	{!loading ? formatter?.format(value) ?? value : <span>{<Spinner />}</span>}
19	</div>
20	{previousValue !== null && <PercentChangePill value={value} comparison={previousValue} />}
21	</div>
22	<footer>
23	<div>{description}</div>
24	</footer>
25	</div>
26	);
27	};
28
29	export default StatWidget;
30