feat(frontend): add UI components

2025-04-29 20:51:49 +01:00
parent 6a67326701
commit 1aba5719a8
4 changed files with 145 additions and 0 deletions
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDifficultyColor, capitalize } from "@/lib/utils";
+import type { QuestionListItem } from "@/types";
+
+interface QuestionCardProps {
+  question: QuestionListItem;
+}
+
+export function QuestionCard({ question }: QuestionCardProps) {
+  return (
+    <Link
+      href={`/questions/${question.slug}`}
+      className="block p-4 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:border-[var(--primary)] transition-colors"
+    >
+      <div className="flex items-start justify-between gap-4 mb-3">
+        <h3 className="font-semibold">{question.title}</h3>
+        <Badge className={getDifficultyColor(question.difficulty)}>
+          {capitalize(question.difficulty)}
+        </Badge>
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-3">
+        {question.categories.map((cat) => (
+          <Badge key={cat.id} variant="outline">
+            {cat.name}
+          </Badge>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-4 text-sm text-[var(--muted-foreground)]">
+        {question.leetcode_id && (
+          <span>LeetCode #{question.leetcode_id}</span>
+        )}
+        {question.patterns.length > 0 && (
+          <span>{question.patterns.map((p) => p.name).join(", ")}</span>
+        )}
+      </div>
+    </Link>
+  );
+}