Show active visitor count.

components/charts/ActiveUsers.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { useSpring, animated } from 'react-spring';
+import classNames from 'classnames';
+import { get } from 'lib/web';
+import styles from './ActiveUsers.module.css';
+
+export default function ActiveUsers({ websiteId, className }) {
+  const [count, setCount] = useState(0);
+
+  async function loadData() {
+    const result = await get(`/api/website/${websiteId}/active`);
+    setCount(result?.[0]?.x);
+  }
+
+  const props = useSpring({
+    x: count,
+    from: { x: 0 },
+  });
+
+  useEffect(() => {
+    loadData();
+
+    const id = setInterval(() => loadData(), 10000);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  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 vistor${count !== 1 ? 's' : ''}`}</div>
+      </div>
+    </div>
+  );
+}

components/charts/ActiveUsers.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.text {
+  display: flex;
+  font-size: var(--font-size-normal);
+}
+
+.value {
+  font-weight: 600;
+  margin-right: 4px;
+}
+
+.dot {
+  background: var(--green400);
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  margin-right: 10px;
+}

components/charts/QuickButtons.module.css

@@ -20,7 +20,7 @@
   font-weight: 600;
 }
 
-@media only screen and (max-width: 720px) {
+@media only screen and (max-width: 768px) {
   .buttons button:last-child {
     display: none;
   }

components/charts/WebsiteHeader.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import PageHeader from 'components/layout/PageHeader';
+import Link from 'components/common/Link';
+import Button from 'components/common/Button';
+import ActiveUsers from './ActiveUsers';
+import Arrow from 'assets/arrow-right.svg';
+import styles from './WebsiteHeader.module.css';
+
+export default function WebsiteHeader({ websiteId, name, showLink = false }) {
+  const router = useRouter();
+
+  return (
+    <PageHeader>
+      {showLink ? (
+        <Link href="/website/[...id]" as={`/website/${websiteId}/${name}`}>
+          <a className={styles.title}>{name}</a>
+        </Link>
+      ) : (
+        <div className={styles.title}>{name}</div>
+      )}
+      <ActiveUsers className={styles.active} websiteId={websiteId} />
+      {showLink && (
+        <Button
+          icon={<Arrow />}
+          onClick={() =>
+            router.push('/website/[...id]', `/website/${websiteId}/${name}`, {
+              shallow: true,
+            })
+          }
+          size="small"
+        >
+          <div>View details</div>
+        </Button>
+      )}
+    </PageHeader>
+  );
+}

components/charts/WebsiteHeader.module.css

@@ -0,0 +1,15 @@
+.title {
+  color: var(--gray-900);
+  font-size: var(--font-size-large);
+  line-height: var(--font-size-large);
+}
+
+.button {
+  font-size: var(--font-size-small);
+}
+
+@media only screen and (max-width: 576px) {
+  .active {
+    display: none;
+  }
+}