Views in live run page

src/app/run/components/RunTimer.tsx

@@ -1,28 +1,37 @@
 import { Card, CardContent } from "@/components/ui/card";
 import formatTime from "@/lib/time-format";
 import { LiveRun } from "@/modules/live-run/types";
+import { Eye } from "lucide-react";
 import { useEffect, useState } from "react";
 
-export default function RunTimer({ runInfo }: { runInfo: LiveRun }) {
+export default function RunTimer({ run }: { run: LiveRun }) {
   const [time, setTime] = useState("00:00:00");
 
   useEffect(() => {
     // Update function calculates elapsed time
-    const updateTime = () => setTime(formatTime(Date.now() - runInfo.start));
+    const updateTime = () => setTime(formatTime(Date.now() - run.start));
 
     // Update immediately and then every second
     updateTime();
     const interval = setInterval(updateTime, 50);
 
     return () => clearInterval(interval); // cleanup on unmount
-  }, [runInfo.start]);
+  }, [run.start]);
 
   return (
     <Card className="relative text-center overflow-hidden h-full">
       <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
       <CardContent className="relative flex flex-col justify-center items-center h-full">
         <p className="timer-display text-primary text-3xl font-bold">{time}</p>
-        <p className="text-muted-foreground">{runInfo.category}</p>
+        <span className="flex gap-4">
+          <p className="text-muted-foreground flex gap-1 items-center">
+            {run.category}
+          </p>
+          <p className="text-muted-foreground flex gap-1 items-center">
+            <Eye className="w-4 h-4" />
+            {run.views}
+          </p>
+        </span>
       </CardContent>
     </Card>
   );

src/app/run/page.tsx

@@ -40,7 +40,7 @@ export default function Run() {
           </div>
 
           <div className="flex-1 animate-fade-in opacity-0 stagger-2">
-            {runInfo && <RunTimer runInfo={runInfo} />}
+            {runInfo && <RunTimer run={runInfo} />}
           </div>
 
           <div className="flex-2">