website refactor

apps/website/components/achievements/AchievementCard.tsx

@@ -0,0 +1,51 @@
+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>
+  );
+}