46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { DateFormatter } from '@/lib/formatters/DateFormatter';
|
|
import { Card } from '@/ui/Card';
|
|
import { Group } from '@/ui/Group';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface AchievementCardProps {
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
unlockedAt: string;
|
|
rarity: 'common' | 'rare' | 'epic' | 'legendary';
|
|
}
|
|
|
|
export function AchievementCard({
|
|
title,
|
|
description,
|
|
icon,
|
|
unlockedAt,
|
|
rarity,
|
|
}: AchievementCardProps) {
|
|
const rarityVariantMap = {
|
|
common: 'rarity-common',
|
|
rare: 'rarity-rare',
|
|
epic: 'rarity-epic',
|
|
legendary: 'rarity-legendary'
|
|
} as const;
|
|
|
|
return (
|
|
<Card
|
|
variant={rarityVariantMap[rarity]}
|
|
>
|
|
<Group direction="row" align="start" gap={3}>
|
|
<Text size="3xl">{icon}</Text>
|
|
<Stack gap={1}>
|
|
<Text weight="medium" variant="high">{title}</Text>
|
|
<Text size="xs" variant="med">{description}</Text>
|
|
<Text size="xs" variant="low">
|
|
{DateFormatter.formatShort(unlockedAt)}
|
|
</Text>
|
|
</Stack>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|