Problems components

src/app/problems/components/ProblemCard.tsx

@@ -0,0 +1,81 @@
+import { Clock, Zap, Users } from "lucide-react";
+
+interface ProblemCardProps {
+  name: string;
+  difficulty: "easy" | "medium" | "hard";
+  tags: string[];
+  bestTime?: string;
+  attempts: number;
+  index?: number;
+}
+
+const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }: ProblemCardProps) => {
+  const difficultyStyles = {
+    easy: "diff-easy",
+    medium: "diff-medium",
+    hard: "diff-hard",
+  };
+
+  const difficultyLabels = {
+    easy: "Easy",
+    medium: "Medium",
+    hard: "Hard",
+  };
+
+  return (
+    <div 
+      className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
+      style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
+    >
+      {/* Glow effect on hover */}
+      <div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      
+      <div className="relative">
+        {/* Header */}
+        <div className="flex items-start justify-between mb-3">
+          <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
+            {name}
+          </h3>
+          <span className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}>
+            {difficultyLabels[difficulty]}
+          </span>
+        </div>
+
+        {/* Tags */}
+        <div className="flex flex-wrap gap-2 mb-4">
+          {tags.map((tag) => (
+            <span 
+              key={tag} 
+              className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        {/* Stats */}
+        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+          {bestTime && (
+            <div className="flex items-center gap-1.5">
+              <Clock className="h-4 w-4 text-primary" />
+              <span className="font-mono">{bestTime}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-1.5">
+            <Users className="h-4 w-4" />
+            <span>{attempts} runs</span>
+          </div>
+        </div>
+
+        {/* Quick run button - appears on hover */}
+        <div className="absolute top-1/2 right-4 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
+          <button className="p-2 rounded-lg bg-primary text-primary-foreground">
+            <Zap className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProblemCard;

src/app/problems/components/RunChat.tsx

@@ -1,48 +0,0 @@
-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>
-  );
-}

src/app/problems/components/RunTimer.tsx

@@ -1,24 +0,0 @@
-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>
-  );
-}