website refactor

apps/website/components/achievements/AchievementCard.tsx

@@ -1,6 +1,7 @@
 import { Card } from '@/ui/Card';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/primitives/Stack';
+import { Group } from '@/ui/Group';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 interface AchievementCardProps {
   title: string;
@@ -10,13 +11,6 @@ interface AchievementCardProps {
   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,
@@ -24,27 +18,27 @@ export function AchievementCard({
   unlockedAt,
   rarity,
 }: AchievementCardProps) {
+  const rarityVariantMap = {
+    common: 'rarity-common',
+    rare: 'rarity-rare',
+    epic: 'rarity-epic',
+    legendary: 'rarity-legendary'
+  } as const;
+
   return (
     <Card
-      p={4}
-      rounded="lg"
-      variant="outline"
-      className={rarityColors[rarity]}
+      variant={rarityVariantMap[rarity]}
     >
-      <Stack direction="row" align="start" gap={3}>
+      <Group direction="row" align="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'
-            })}
+        <Group direction="column" gap={1}>
+          <Text weight="medium" variant="high">{title}</Text>
+          <Text size="xs" variant="med">{description}</Text>
+          <Text size="xs" variant="low">
+            {DateDisplay.formatShort(unlockedAt)}
           </Text>
-        </Stack>
-      </Stack>
+        </Group>
+      </Group>
     </Card>
   );
 }