wip

apps/website/components/profile/AchievementGrid.tsx

@@ -10,13 +10,14 @@ import { Text } from '@/ui/Text';
 import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
 import { Grid } from '@/ui/Grid';
+import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
 
 interface Achievement {
   id: string;
   title: string;
   description: string;
   icon: string;
-  rarity: string;
+  rarity: 'common' | 'rare' | 'epic' | 'legendary' | string;
   earnedAt: Date;
 }
 
@@ -50,28 +51,31 @@ export function AchievementGrid({ achievements }: AchievementGridProps) {
       <Grid cols={1} gap={4}>
         {achievements.map((achievement) => {
           const AchievementIcon = getAchievementIcon(achievement.icon);
+          const rarity = AchievementDisplay.getRarityColor(achievement.rarity);
           return (
             <Surface
               key={achievement.id}
-              variant="muted"
+              variant={rarity.surface}
               rounded="xl"
               border
               padding={4}
             >
               <Stack direction="row" align="start" gap={3}>
                 <Surface variant="muted" rounded="lg" padding={3}>
-                  <Icon icon={AchievementIcon} size={5} color="#facc15" />
+                  <Icon icon={AchievementIcon} size={5} color={rarity.icon} />
                 </Surface>
                 <Box>
                   <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>
-                  <Text size="xs" color="text-gray-500" block mt={2}>
-                    {achievement.earnedAt.toLocaleDateString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                      year: 'numeric',
-                    })}
-                  </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>
                 </Box>
               </Stack>
             </Surface>