101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
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 h-full flex flex-col justify-between"
|
|
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 pointer-events-none" />
|
|
|
|
{/* Content */}
|
|
<div className="relative flex flex-col h-full">
|
|
{/* 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>
|
|
|
|
{/* Spacer */}
|
|
<div className="flex-1" />
|
|
|
|
{/* Stats + Action */}
|
|
<div className="flex items-center justify-between mt-4 text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-4">
|
|
{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 */}
|
|
<div className="opacity-0 group-hover:opacity-100 transition-all duration-300">
|
|
<Button size="p2">
|
|
<Zap className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProblemCard;
|