Add realtime counter to website

site/components/sections/footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 
-export function Footer() {
+export function Footer({ noBadge }: { noBadge?: boolean }) {
   return (
     <footer className="container relative justify-center my-8 flex flex-col items-center space-y-4">
       <div className="flex space-x-4">
@@ -28,14 +28,20 @@ export function Footer() {
           </a>
         </span>
       </div>
-      <div>
-        <a href="https://splitbee.io">
-          <img
-            src="https://splitbee-cdn.fra1.cdn.digitaloceanspaces.com/static/badge/splitbee-badge.svg"
-            alt="Analytics by Splitbee.io"
-          />
-        </a>
-      </div>
+      {!noBadge && (
+        <div>
+          <a
+            href="https://splitbee.io/?ref=rht"
+            data-splitbee-event="Click Splitbee Analytics"
+            data-splitbee-event-location="Footer"
+          >
+            <img
+              src="https://splitbee-cdn.fra1.cdn.digitaloceanspaces.com/static/badge/splitbee-badge.svg"
+              alt="Analytics by Splitbee.io"
+            />
+          </a>
+        </div>
+      )}
     </footer>
   );
 }

site/components/sections/splitbee-counter.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import clsx from 'clsx';
+
+export const useSplitbeeCount = <T extends string>(
+  event: T,
+  token: string
+): number => {
+  const [data, setData] = React.useState<number>(0);
+  const socket = React.useRef(null);
+  React.useEffect(() => {
+    if (typeof window !== undefined) {
+      socket.current = new WebSocket('wss://api.splitbee.io/realtime');
+      socket.current.onopen = (e) => {
+        socket.current.send(
+          JSON.stringify({
+            type: 'subscribe',
+            data: {
+              token: token,
+              events: [event],
+            },
+          })
+        );
+      };
+      socket.current.onmessage = (e) => {
+        const d = JSON.parse(e.data);
+        setData(d.count);
+      };
+
+      return () => {};
+    }
+  }, []);
+
+  return data;
+};
+
+export const SplitbeeCounter = () => {
+  const count = useSplitbeeCount('Trigger Toast', 'NTV7AYBLEXW3');
+
+  const letters = count.toString().split('');
+
+  return (
+    <div className="flex items-center justify-center p-4 flex-col gap-3 mt-4">
+      <div className="font-semibold text-toast-900 rounded text-lg">
+        Toasts made on this website so far
+      </div>
+      <div
+        className={clsx('grid gap-2 grid-flow-col', count === 0 && 'opacity-0')}
+      >
+        {letters.map((l, i) => (
+          <div
+            className={clsx(
+              'animate-enter',
+              'bg-toast-100 rounded p-4 text-lg font-bold font-mono'
+            )}
+            key={i + '-' + l}
+          >
+            {l}
+          </div>
+        ))}
+      </div>
+      <div className="text-toast-600">
+        ⚡️ Real-time analytics by{' '}
+        <a
+          className="underline"
+          data-splitbee-event="Click Splitbee Analytics"
+          data-splitbee-event-location="Counter"
+          href="https://splitbee.io/?ref=rht-realtime"
+        >
+          Splitbee
+        </a>
+      </div>
+    </div>
+  );
+};

site/pages/index.tsx

@@ -16,6 +16,7 @@ import { version } from '../../package.json';
 import { ToastExample } from '../components/sections/toast-example';
 import { Footer } from '../components/sections/footer';
 import { ToasterExample } from '../components/sections/toaster-example';
+import { SplitbeeCounter } from '../components/sections/splitbee-counter';
 import Link from 'next/link';
 
 const Feature: React.FC = ({ children }) => (
@@ -236,11 +237,12 @@ export default function Home() {
           </div>
         </div>
       </header>
+      <SplitbeeCounter />
       <Toaster position={position} reverseOrder={reverse} toastOptions={{}} />
-      <div className="container flex justify-end -mt-24 pointer-events-none">
+      <div className="container flex justify-end -mt-10 pointer-events-none">
         <Butter2 className="transform translate-x-20" />
       </div>
-      <Footer />
+      <Footer noBadge />
     </div>
   );
 }