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-19 01:24:07 +01:00
parent e1ce3bffd1
commit edc4cd7f21
64 changed files with 1113 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/website/components/achievements/AchievementCard.tsx
View File

@@ -1,6 +1,7 @@
import { Card } from '@/ui/Card';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
interface AchievementCardProps {
@@ -31,13 +32,13 @@ export function AchievementCard({
>
<Group direction="row" align="start" gap={3}>
<Text size="3xl">{icon}</Text>
<Group direction="column" gap={1}>
<Stack 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>
</Group>
</Stack>
</Group>
</Card>
);

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

@@ -4,6 +4,9 @@ import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
import React from 'react';
@@ -36,9 +39,9 @@ function getAchievementIcon(icon: string) {
export function AchievementGrid({ achievements }: AchievementGridProps) {
return (
<Card>
<Group direction="column" gap={4} fullWidth>
<Group direction="row" align="center" justify="between" fullWidth>
<Group direction="row" align="center" gap={2}>
<Stack gap={4} fullWidth>
<Group align="center" justify="between" fullWidth>
<Group align="center" gap={2}>
<Icon icon={Award} size={5} intent="warning" />
<Heading level={2}>
Achievements
@@ -46,38 +49,39 @@ export function AchievementGrid({ achievements }: AchievementGridProps) {
</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.getRarityVariant(achievement.rarity);
return (
<Card
key={achievement.id}
variant={rarity.surface}
>
<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" variant="low">•</Text>
<Text size="xs" variant="low">
{AchievementDisplay.formatDate(achievement.earnedAt)}
</Text>
</Group>
<Grid cols={1} gap={4}>
{achievements.map((achievement) => {
const AchievementIcon = getAchievementIcon(achievement.icon);
const rarity = AchievementDisplay.getRarityVariant(achievement.rarity);
return (
<Card
key={achievement.id}
variant={rarity.surface}
>
<Group align="start" gap={3}>
<Surface variant="default" padding={3} rounded="md">
<Icon icon={AchievementIcon} size={5} intent={rarity.iconIntent} />
</Surface>
<Stack flex={1} gap={1}>
<Text weight="semibold" size="sm" variant="high" block>{achievement.title}</Text>
<Text size="xs" variant="med" block>{achievement.description}</Text>
<Group align="center" gap={2}>
<Text size="xs" variant={rarity.text} weight="medium" uppercase>
{achievement.rarity}
</Text>
<Text size="xs" variant="low">•</Text>
<Text size="xs" variant="low">
{AchievementDisplay.formatDate(achievement.earnedAt)}
</Text>
</Group>
</Stack>
</Group>
</Group>
</Card>
);
})}
</Grid>
</Card>
);
})}
</Grid>
</Stack>
</Card>
);
}