onboarding completed

apps/dashboard/src/app/(auth)/live-events/index.tsx

@@ -0,0 +1,12 @@
+import { getEvents, transformMinimalEvent } from '@openpanel/db';
+
+import LiveEvents from './live-events';
+
+const LiveEventsServer = async () => {
+  const events = await getEvents(
+    'SELECT * FROM events ORDER BY created_at LIMIT 30'
+  );
+  return <LiveEvents events={events.map(transformMinimalEvent)} />;
+};
+
+export default LiveEventsServer;

apps/dashboard/src/app/(auth)/live-events/live-events.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list-item';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import useWS from '@/hooks/useWS';
+import { AnimatePresence, motion } from 'framer-motion';
+
+import type { IServiceEventMinimal } from '@openpanel/db';
+
+type Props = {
+  events: IServiceEventMinimal[];
+};
+
+const LiveEvents = ({ events }: Props) => {
+  const [state, setState] = useState(events ?? []);
+  useWS<IServiceEventMinimal>('/live/events', (event) => {
+    setState((p) => [event, ...p].slice(0, 30));
+  });
+  return (
+    <ScrollArea className="h-screen">
+      <div className="text-background-foreground py-16 text-center text-2xl font-bold">
+        Real time data
+        <br />
+        at your fingertips
+      </div>
+      <AnimatePresence mode="popLayout" initial={false}>
+        <div className="flex flex-col gap-4 p-4">
+          {state.map((event) => (
+            <motion.div
+              key={event.id}
+              layout
+              initial={{ opacity: 0, x: -400, scale: 0.5 }}
+              animate={{ opacity: 1, x: 0, scale: 1 }}
+              exit={{ opacity: 0, x: 200, scale: 1.2 }}
+              transition={{ duration: 0.6, type: 'spring' }}
+            >
+              <EventListItem {...event} minimal />
+            </motion.div>
+          ))}
+        </div>
+      </AnimatePresence>
+    </ScrollArea>
+  );
+};
+
+export default LiveEvents;