mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 18:26:20 +01:00
34 lines
923 B
JavaScript
34 lines
923 B
JavaScript
import React, { useMemo } from 'react';
|
|
import { useSpring, animated } from 'react-spring';
|
|
import classNames from 'classnames';
|
|
import useFetch from 'hooks/useFetch';
|
|
import styles from './ActiveUsers.module.css';
|
|
|
|
export default function ActiveUsers({ websiteId, className }) {
|
|
const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
|
|
const count = useMemo(() => {
|
|
return data?.[0]?.x || 0;
|
|
}, [data]);
|
|
|
|
const props = useSpring({
|
|
x: count,
|
|
from: { x: 0 },
|
|
});
|
|
|
|
if (count === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={classNames(styles.container, className)}>
|
|
<div className={styles.dot} />
|
|
<div className={styles.text}>
|
|
<animated.div className={styles.value}>
|
|
{props.x.interpolate(x => x.toFixed(0))}
|
|
</animated.div>
|
|
<div>{`current visitor${count !== 1 ? 's' : ''}`}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|