Run components

2026-02-03 15:08:25 +01:00
parent 4003dc7d23
commit 5ea19d106c
3 changed files with 75 additions and 71 deletions
@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+
+export type ChatMessage = {
+  user: string;
+  message: string;
+  time: string;
+};
+
+export default function RunChat({
+  chatMessages,
+}: {
+  chatMessages: ChatMessage[];
+}) {
+  return (
+    <Card className="flex flex-col flex-1">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base">Chat</CardTitle>
+          <span className="text-xs text-muted-foreground">
+            {chatMessages.length} messages
+          </span>
+        </div>
+      </CardHeader>
+
+      <Separator />
+
+      <CardContent className="flex flex-col flex-1 gap-3">
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto space-y-2">
+          {chatMessages.map((msg, i) => (
+            <div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
+              <span className="font-semibold text-foreground">{msg.user}</span>:{" "}
+              <span className="text-muted-foreground">{msg.message}</span>
+              <span className="ml-2 text-xs text-muted-foreground">
+                {msg.time}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {/* Input */}
+        <Input placeholder="Type a message…" />
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,24 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export type RunInfo = {
+  category: "any%" | "100%";
+  problems: number;
+  currentAttempt: number;
+  pbTime: string;
+  worldRecord: string;
+};
+
+export default function RunTimer({ runInfo }: { runInfo: RunInfo }) {
+  return (
+    <Card className="relative text-center overflow-hidden">
+      <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
+      <CardContent className="relative">
+        <p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
+        <p className="mt-2 font-mono text-sm text-muted-foreground">
+          PB: {runInfo.pbTime} | Diff:{" "}
+          <span className="text-red-400">+0:12</span>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}