49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { getDifficultyVariant, getDifficultyLabel, 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
|
|
variant={getDifficultyVariant(question.difficulty)}
|
|
aria-label={getDifficultyLabel(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="category">
|
|
{cat.name}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 text-sm">
|
|
{question.patterns.map((p) => (
|
|
<Badge key={p.id} variant="pattern">
|
|
{p.name}
|
|
</Badge>
|
|
))}
|
|
{question.leetcode_id && (
|
|
<span className="text-[var(--muted-foreground)]">
|
|
LeetCode #{question.leetcode_id}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|