83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
|
|
import { Card } from '@/ui/Card';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
|
|
|
|
interface Achievement {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
rarity: 'common' | 'rare' | 'epic' | 'legendary' | string;
|
|
earnedAt: Date;
|
|
}
|
|
|
|
interface AchievementGridProps {
|
|
achievements: Achievement[];
|
|
}
|
|
|
|
function getAchievementIcon(icon: string) {
|
|
switch (icon) {
|
|
case 'trophy': return Trophy;
|
|
case 'medal': return Medal;
|
|
case 'star': return Star;
|
|
case 'crown': return Crown;
|
|
case 'target': return Target;
|
|
case 'zap': return Zap;
|
|
default: return Award;
|
|
}
|
|
}
|
|
|
|
export function AchievementGrid({ achievements }: AchievementGridProps) {
|
|
return (
|
|
<Card>
|
|
<Stack mb={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Heading level={2} icon={<Icon icon={Award} size={5} color="#facc15" />}>
|
|
Achievements
|
|
</Heading>
|
|
<Text size="sm" color="text-gray-500" weight="normal">{achievements.length} earned</Text>
|
|
</Stack>
|
|
</Stack>
|
|
<Grid cols={1} gap={4}>
|
|
{achievements.map((achievement) => {
|
|
const AchievementIcon = getAchievementIcon(achievement.icon);
|
|
const rarity = AchievementDisplay.getRarityColor(achievement.rarity);
|
|
return (
|
|
<Card
|
|
key={achievement.id}
|
|
variant="outline"
|
|
p={4}
|
|
rounded="xl"
|
|
className={rarity.surface === 'muted' ? 'bg-panel-gray/40' : ''}
|
|
>
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Stack bg="panel-gray/40" rounded="lg" p={3} align="center" justify="center">
|
|
<Icon icon={AchievementIcon} size={5} color={rarity.icon} />
|
|
</Stack>
|
|
<Stack flex={1}>
|
|
<Text weight="semibold" size="sm" color="text-white" block>{achievement.title}</Text>
|
|
<Text size="xs" color="text-gray-400" block mt={1}>{achievement.description}</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={2}>
|
|
<Text size="xs" color={rarity.text} weight="medium">
|
|
{achievement.rarity.toUpperCase()}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500">•</Text>
|
|
<Text size="xs" color="text-gray-500">
|
|
{AchievementDisplay.formatDate(achievement.earnedAt)}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</Card>
|
|
);
|
|
}
|