77758bc51a
Sprint 3.1 — Default colors → semantic (~15 files, ~99 replacements): - lime-500 → success, red-500 → destructive, cyan-500 → primary Sprint 3.2 — Hardcoded colors → semantic (~13 files, ~99 replacements): - text-white → text-foreground, bg-black → bg-background, bg-white → bg-card Sprint 3.3 — Legacy kodo-* → semantic (~27 files, ~122 replacements): - bg-kodo-ink → bg-card, bg-kodo-void → bg-background, text-kodo-steel → text-muted-foreground - Preserved kodo-cyan/magenta/lime/gold palette accents and gradients Sprint 3.4 — Arbitrary values → Tailwind scale (5 replacements): - min-h-[600px] → min-h-layout-page, min-h-[400px] → min-h-layout-page-sm - left-[50%] → left-1/2, min-h-[80px] → min-h-20, min-h-[40px] → min-h-10 Sprint 3.5 — Border-radius standardization (4 replacements): - Modal/dialog skeletons: rounded-lg → rounded-xl (convention) Co-authored-by: Cursor <cursoragent@cursor.com>
73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Achievement } from '../../types';
|
|
import { Lock, CheckCircle } from 'lucide-react';
|
|
|
|
interface AchievementCardProps {
|
|
achievement: Achievement;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const AchievementCard: React.FC<AchievementCardProps> = ({
|
|
achievement,
|
|
compact = false,
|
|
}) => {
|
|
const isUnlocked = achievement.progress >= achievement.maxProgress;
|
|
const percentage = Math.min(
|
|
100,
|
|
(achievement.progress / achievement.maxProgress) * 100,
|
|
);
|
|
|
|
return (
|
|
<Card
|
|
variant={isUnlocked ? 'gaming' : 'default'}
|
|
className={`relative overflow-hidden transition-all group ${isUnlocked ? 'border-warning/30 bg-warning/5' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
|
|
>
|
|
{isUnlocked && (
|
|
<div className="absolute top-2 right-2 text-warning animate-pulse">
|
|
<CheckCircle className="w-5 h-5" />
|
|
</div>
|
|
)}
|
|
{!isUnlocked && (
|
|
<div className="absolute top-2 right-2 text-muted-foreground">
|
|
<Lock className="w-4 h-4" />
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`flex ${compact ? 'flex-row items-center gap-4' : 'flex-col items-center text-center gap-4'}`}
|
|
>
|
|
<div
|
|
className={`rounded-full bg-gradient-to-br from-kodo-graphite to-black flex items-center justify-center border-2 ${isUnlocked ? 'border-warning w-16 h-16 text-3xl shadow-gold-glow' : 'border-border w-12 h-12 text-xl text-muted-foreground'}`}
|
|
>
|
|
{achievement.icon}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<h4
|
|
className={`font-bold truncate ${isUnlocked ? 'text-white' : 'text-muted-foreground'}`}
|
|
>
|
|
{achievement.name}
|
|
</h4>
|
|
<p className="text-xs text-muted-foreground line-clamp-2 mb-2">
|
|
{achievement.description}
|
|
</p>
|
|
|
|
{/* Progress */}
|
|
<div className="w-full bg-card h-1.5 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-warning' : 'bg-muted'}`}
|
|
style={{ width: `${percentage}%` }}
|
|
></div>
|
|
</div>
|
|
<div className="flex justify-between text-xs mt-1 font-mono">
|
|
<span className={isUnlocked ? 'text-warning' : 'text-muted-foreground'}>
|
|
{achievement.progress} / {achievement.maxProgress}
|
|
</span>
|
|
<span className="text-muted-foreground">+{achievement.xpReward} XP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|