52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface AchievementCardProps {
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
unlockedAt: string;
|
|
rarity: 'common' | 'rare' | 'epic' | 'legendary';
|
|
}
|
|
|
|
const rarityColors = {
|
|
common: 'border-gray-500 bg-gray-500/10',
|
|
rare: 'border-blue-400 bg-blue-400/10',
|
|
epic: 'border-purple-400 bg-purple-400/10',
|
|
legendary: 'border-warning-amber bg-warning-amber/10'
|
|
};
|
|
|
|
export function AchievementCard({
|
|
title,
|
|
description,
|
|
icon,
|
|
unlockedAt,
|
|
rarity,
|
|
}: AchievementCardProps) {
|
|
return (
|
|
<Box
|
|
p={4}
|
|
rounded="lg"
|
|
border
|
|
className={rarityColors[rarity]}
|
|
>
|
|
<Box display="flex" alignItems="start" gap={3}>
|
|
<Text size="3xl">{icon}</Text>
|
|
<Stack gap={1} flexGrow={1}>
|
|
<Text weight="medium" color="text-white">{title}</Text>
|
|
<Text size="xs" color="text-gray-400">{description}</Text>
|
|
<Text size="xs" color="text-gray-500">
|
|
{new Date(unlockedAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
})}
|
|
</Text>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|