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-20 01:30:17 +01:00
parent 30a31dc44f
commit 3556db494f
6 changed files with 210 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
apps/website/ui/LeagueCard.tsx
View File

@@ -5,6 +5,8 @@ import { Card } from './Card';
import { Icon } from './Icon';
import { Image } from './Image';
import { Text } from './Text';
import { Stack } from './Stack';
import { Group } from './Group';
export interface LeagueCardProps {
children: ReactNode;
@@ -17,23 +19,37 @@ export interface LeagueCardProps {
export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
return (
<Card
variant="dark"
variant="precision"
onClick={onClick}
style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default', overflow: 'hidden', height: '100%' }}
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
padding="none"
>
<Box height="8rem" position="relative" style={{ overflow: 'hidden' }}>
<Image src={coverUrl} alt="Cover" fullWidth fullHeight objectFit="cover" style={{ opacity: 0.6 }} />
<Box position="absolute" inset={0} style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} />
<Box position="absolute" top={3} left={3} display="flex" gap={2}>
{badges}
<Box height="10rem" position="relative" overflow="hidden">
<Image
src={coverUrl}
alt="Cover"
fullWidth
fullHeight
objectFit="cover"
style={{ opacity: 0.4, filter: 'grayscale(0.2)' }}
/>
<Box
position="absolute"
inset={0}
style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }}
/>
<Box position="absolute" top={4} left={4}>
<Group gap={2}>
{badges}
</Group>
</Box>
{logo && (
<Box position="absolute" left={4} bottom={-6} zIndex={10}>
<Box position="absolute" left={6} bottom={-4} zIndex={10}>
{logo}
</Box>
)}
</Box>
<Box padding={4} paddingTop={8} display="flex" flexDirection="col" fullHeight>
<Box padding={6} paddingTop={10} display="flex" flexDirection="col" flex={1}>
{children}
</Box>
</Card>
@@ -44,7 +60,7 @@ export interface LeagueCardStatsProps {
label: string;
value: string;
percentage: number;
intent?: 'primary' | 'success' | 'warning';
intent?: 'primary' | 'success' | 'warning' | 'telemetry';
}
export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
@@ -52,17 +68,27 @@ export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }
primary: 'var(--ui-color-intent-primary)',
success: 'var(--ui-color-intent-success)',
warning: 'var(--ui-color-intent-warning)',
telemetry: 'var(--ui-color-intent-telemetry)',
};
return (
<Box marginBottom={4}>
<Box display="flex" alignItems="center" justifyContent="between" marginBottom={1.5}>
<Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>
<Text size="xs" variant="med" font="mono">{value}</Text>
</Box>
<Box height="4px" bg="var(--ui-color-bg-surface-muted)" rounded="full" style={{ overflow: 'hidden' }}>
<Box height="100%" bg={intentColors[intent]} style={{ width: `${Math.min(percentage, 100)}%` }} />
</Box>
<Box marginBottom={6}>
<Stack gap={2}>
<Group justify="between" align="end">
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
<Text size="sm" variant="high" font="mono" weight="bold">{value}</Text>
</Group>
<Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
<Box
height="100%"
bg={intentColors[intent]}
style={{
width: `${Math.min(percentage, 100)}%`,
boxShadow: `0 0 8px ${intentColors[intent]}44`
}}
/>
</Box>
</Stack>
</Box>
);
};
@@ -72,11 +98,19 @@ export interface LeagueCardFooterProps {
}
export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
<Box marginTop="auto" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
{children}
<Box display="flex" alignItems="center" gap={1}>
<Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
<Icon icon={ChevronRight} size={3} intent="low" />
</Box>
<Box
marginTop="auto"
paddingTop={4}
style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
>
<Group justify="between" align="center">
<Box flex={1}>
{children}
</Box>
<Group gap={1} align="center">
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">ACCESS</Text>
<Icon icon={ChevronRight} size={3} intent="low" />
</Group>
</Group>
</Box>
);