18 lines
543 B
JavaScript
18 lines
543 B
JavaScript
|
import React from 'react';
|
||
|
|
import { useSpring, animated } from 'react-spring';
|
||
|
|
import { formatNumber } from '../../lib/format';
|
||
|
|
import styles from './MetricCard.module.css';
|
||
|
|
|
||
|
|
const MetricCard = ({ value = 0, label, format = formatNumber }) => {
|
||
|
|
const props = useSpring({ x: value, from: { x: 0 } });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.card}>
|
||
|
|
<animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
|
||
|
|
<div className={styles.label}>{label}</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default MetricCard;
|