mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
apps/website/components/achievements/AchievementGrid.tsx
View File

@@ -1,11 +1,12 @@
import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
import { Card } from '@/ui/Card';
import { Grid } from '@/ui/primitives/Grid';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
import React from 'react';
interface Achievement {
id: string;
@@ -35,44 +36,44 @@ function getAchievementIcon(icon: string) {
export function AchievementGrid({ achievements }: AchievementGridProps) {
return (
<Card>
<Stack 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>
</Stack>
<Group direction="column" gap={4} fullWidth>
<Group direction="row" align="center" justify="between" fullWidth>
<Group direction="row" align="center" gap={2}>
<Icon icon={Award} size={5} intent="warning" />
<Heading level={2}>
Achievements
</Heading>
</Group>
<Text size="sm" variant="low" weight="normal">{achievements.length} earned</Text>
</Group>
</Group>
<Grid cols={1} gap={4}>
{achievements.map((achievement) => {
const AchievementIcon = getAchievementIcon(achievement.icon);
const rarity = AchievementDisplay.getRarityColor(achievement.rarity);
const rarity = AchievementDisplay.getRarityVariant(achievement.rarity);
return (
<Card
key={achievement.id}
variant="outline"
p={4}
rounded="xl"
className={rarity.surface === 'muted' ? 'bg-panel-gray/40' : ''}
variant={rarity.surface}
>
<Stack direction="row" align="start" gap={3}>
<Stack bg="panel-gray/40" rounded="lg" p={3} align="center" justify="center">
<Icon icon={AchievementIcon} size={5} color={rarity.icon} />
</Stack>
<Stack flex={1}>
<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>
<Stack direction="row" align="center" gap={2} mt={2}>
<Text size="xs" color={rarity.text} weight="medium">
{achievement.rarity.toUpperCase()}
<Group direction="row" align="start" gap={3}>
<Card variant="default" style={{ padding: '0.75rem' }}>
<Icon icon={AchievementIcon} size={5} intent={rarity.iconIntent} />
</Card>
<Group direction="column" fullWidth>
<Text weight="semibold" size="sm" variant="high" block>{achievement.title}</Text>
<Text size="xs" variant="med" block>{achievement.description}</Text>
<Group direction="row" align="center" gap={2}>
<Text size="xs" variant={rarity.text} weight="medium" uppercase>
{achievement.rarity}
</Text>
<Text size="xs" color="text-gray-500">•</Text>
<Text size="xs" color="text-gray-500">
<Text size="xs" variant="low">•</Text>
<Text size="xs" variant="low">
{AchievementDisplay.formatDate(achievement.earnedAt)}
</Text>
</Stack>
</Stack>
</Stack>
</Group>
</Group>
</Group>
</Card>
);
})}