Initial commit

Created from https://vercel.com/new

components/metrics/ActiveUsers.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import useFetch from 'hooks/useFetch';
+import Dot from 'components/common/Dot';
+import { TOKEN_HEADER } from 'lib/constants';
+import useShareToken from 'hooks/useShareToken';
+import styles from './ActiveUsers.module.css';
+
+export default function ActiveUsers({ websiteId, className }) {
+  const shareToken = useShareToken();
+  const { data } = useFetch(`/api/website/${websiteId}/active`, {
+    interval: 60000,
+    headers: { [TOKEN_HEADER]: shareToken?.token },
+  });
+  const count = useMemo(() => {
+    return data?.[0]?.x || 0;
+  }, [data]);
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      <Dot />
+      <div className={styles.text}>
+        <div>
+          <FormattedMessage
+            id="message.active-users"
+            defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
+            values={{ x: count }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}