website refactor

apps/website/components/profile/AchievementGrid.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React from 'react';
+import { Award, Trophy, Medal, Star, Crown, Target, Zap } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/Grid';
+
+interface Achievement {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  rarity: string;
+  earnedAt: Date;
+}
+
+interface AchievementGridProps {
+  achievements: Achievement[];
+}
+
+function getAchievementIcon(icon: string) {
+  switch (icon) {
+    case 'trophy': return Trophy;
+    case 'medal': return Medal;
+    case 'star': return Star;
+    case 'crown': return Crown;
+    case 'target': return Target;
+    case 'zap': return Zap;
+    default: return Award;
+  }
+}
+
+export function AchievementGrid({ achievements }: AchievementGridProps) {
+  return (
+    <Card>
+      <Box mb={4}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={2} icon={<Icon icon={Award} size={5} color="#facc15" />}>
+            Achievements
+          </Heading>
+          <Text size="sm" color="text-gray-500" weight="normal">{achievements.length} earned</Text>
+        </Stack>
+      </Box>
+      <Grid cols={1} gap={4}>
+        {achievements.map((achievement) => {
+          const AchievementIcon = getAchievementIcon(achievement.icon);
+          return (
+            <Surface
+              key={achievement.id}
+              variant="muted"
+              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" />
+                </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>
+                </Box>
+              </Stack>
+            </Surface>
+          );
+        })}
+      </Grid>
+    </Card>
+  );
+}