39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import MetricCard from 'components/metrics/MetricCard';
|
|
import { useMessages } from 'components/hooks';
|
|
import { RealtimeData } from 'lib/types';
|
|
import styles from './RealtimeHeader.module.css';
|
|
|
|
export function RealtimeHeader({ data }: { data: RealtimeData }) {
|
|
const { formatMessage, labels } = useMessages();
|
|
const { pageviews, visitors, events, countries } = data || {};
|
|
|
|
return (
|
|
<div className={styles.header}>
|
|
<div className={styles.metrics}>
|
|
<MetricCard
|
|
className={styles.card}
|
|
label={formatMessage(labels.views)}
|
|
value={pageviews?.length}
|
|
/>
|
|
<MetricCard
|
|
className={styles.card}
|
|
label={formatMessage(labels.visitors)}
|
|
value={visitors?.length}
|
|
/>
|
|
<MetricCard
|
|
className={styles.card}
|
|
label={formatMessage(labels.events)}
|
|
value={events?.length}
|
|
/>
|
|
<MetricCard
|
|
className={styles.card}
|
|
label={formatMessage(labels.countries)}
|
|
value={countries?.length}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RealtimeHeader;
|