39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). 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-kodo-gold/30 bg-kodo-gold/5' : 'opacity-80 grayscale hover:grayscale-0 hover:opacity-100'}`}
|
|
>
|
|
{isUnlocked && (
|
|
<div className="absolute top-2 right-2 text-kodo-gold animate-pulse">
|
|
<CheckCircle className="w-5 h-5" />
|
|
</div>
|
|
)}
|
|
{!isUnlocked && (
|
|
<div className="absolute top-2 right-2 text-kodo-content-dim">
|
|
<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-kodo-gold w-16 h-16 text-3xl shadow-gold-glow' : 'border-kodo-steel w-12 h-12 text-xl text-kodo-content-dim'}`}
|
|
>
|
|
{achievement.icon}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<h4
|
|
className={`font-bold truncate ${isUnlocked ? 'text-white' : 'text-kodo-content-dim'}`}
|
|
>
|
|
{achievement.name}
|
|
</h4>
|
|
<p className="text-xs text-kodo-content-dim line-clamp-2 mb-2">
|
|
{achievement.description}
|
|
</p>
|
|
|
|
{/* Progress */}
|
|
<div className="w-full bg-kodo-graphite h-1.5 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-[var(--duration-slow)] ${isUnlocked ? 'bg-kodo-gold' : 'bg-kodo-steel'}`}
|
|
style={{ width: `${percentage}%` }}
|
|
></div>
|
|
</div>
|
|
<div className="flex justify-between text-xs mt-1 font-mono">
|
|
<span className={isUnlocked ? 'text-kodo-gold' : 'text-kodo-content-dim'}>
|
|
{achievement.progress} / {achievement.maxProgress}
|
|
</span>
|
|
<span className="text-kodo-steel">+{achievement.xpReward} XP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|