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 21:30:36 +01:00
parent 5715e35790
commit a0db155427
23 changed files with 582 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/website/ui/ContentShell.tsx
View File

@@ -14,18 +14,14 @@ export const ContentShell = ({
}: ContentShellProps) => {
return (
<Box display="flex" flexDirection="col" fullHeight>
{header && (
<Box borderBottom>
{header}
</Box>
)}
{header && <Box borderBottom>{header}</Box>}
<Box display="flex" flex={1} minHeight="0">
{sidebar && (
<Box width="18rem" borderRight display={{ base: 'none', lg: 'block' }}>
{sidebar}
</Box>
)}
<Box flex={1} overflow="auto">
<Box flex={1} minWidth="0">
{children}
</Box>
</Box>

21
apps/website/ui/ContentViewport.tsx
View File

@@ -1,6 +1,5 @@
import { ReactNode } from 'react';
import { Box } from './Box';
import { Container } from './Container';
import { Box, type Spacing } from './Box';
export interface ContentViewportProps {
children: ReactNode;
@@ -8,23 +7,25 @@ export interface ContentViewportProps {
fullWidth?: boolean;
}
export const ContentViewport = ({
children,
export const ContentViewport = ({
children,
padding = 'md',
fullWidth = false
fullWidth = false,
}: ContentViewportProps) => {
const paddingMap: Record<string, any> = {
const paddingMap: Record<NonNullable<ContentViewportProps['padding']>, Spacing> = {
none: 0,
sm: 4,
md: 8,
lg: 12,
};
const maxWidth = fullWidth ? '100%' : '80rem';
return (
<Box flexGrow={1} width="full">
<Container size={fullWidth ? 'full' : 'xl'} py={paddingMap[padding]}>
<Box flexGrow={1} width="full" display="flex" justifyContent="center" minWidth="0">
<Box width="full" maxWidth={maxWidth} paddingX={4} py={paddingMap[padding]} minWidth="0">
{children}
</Container>
</Box>
</Box>
);
};
};

32
apps/website/ui/ControlBar.tsx
View File

@@ -5,33 +5,35 @@ import { Surface } from './Surface';
export interface ControlBarProps {
children: ReactNode;
leftContent?: ReactNode;
variant?: 'default' | 'dark';
}
export const ControlBar = ({
children,
leftContent,
variant = 'default'
}: ControlBarProps) => {
export const ControlBar = ({ children, leftContent }: ControlBarProps) => {
return (
<Surface
variant={variant === 'dark' ? 'dark' : 'muted'}
padding={4}
<Surface
as="header"
variant="precision"
paddingX={0}
height="56px"
position="sticky"
top="0"
zIndex={50}
style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}
zIndex={100}
borderBottom={true}
backgroundColor="rgba(10, 10, 11, 0.92)"
className="backdrop-blur-xl"
style={{
boxShadow: '0 1px 0 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35)',
}}
>
<Box display="flex" alignItems="center" justifyContent="between" flexWrap="wrap" gap={4}>
<Box display="flex" alignItems="center" justifyContent="between" h="full" width="full" px={4}>
{leftContent && (
<Box display="flex" alignItems="center" gap={4} flex={1}>
<Box display="flex" alignItems="center" h="full" minWidth="0" flex={1}>
{leftContent}
</Box>
)}
<Box display="flex" alignItems="center" gap={4} justifyContent="end" flex={leftContent ? 0 : 1}>
<Box display="flex" alignItems="center" justifyContent="end" minWidth="0" flex={leftContent ? 0 : 1}>
{children}
</Box>
</Box>
</Surface>
);
};
};

4
apps/website/ui/MainContent.tsx
View File

@@ -9,8 +9,8 @@ export interface MainContentProps {
export const MainContent = ({ children, maxWidth = 'xl' }: MainContentProps) => {
return (
<Box as="main" flex={1} style={{ overflowY: 'auto' }} padding={6}>
<Container size={maxWidth === '7xl' ? 'xl' : maxWidth as any}>
<Box as="main" flex={1} padding={6}>
<Container size={maxWidth === '7xl' ? 'xl' : (maxWidth as any)}>
<Box display="flex" flexDirection="col" gap={6} fullWidth>
{children}
</Box>

7
apps/website/ui/Surface.tsx
View File

@@ -16,7 +16,7 @@ import { ThemeRadii, ThemeShadows } from './theme/Theme';
export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T> {
as?: T;
children?: ReactNode;
variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary' | 'precision';
rounded?: keyof ThemeRadii | 'none' | '2xl';
shadow?: keyof ThemeShadows | 'none';
}
@@ -36,6 +36,11 @@ export const Surface = forwardRef(<T extends ElementType = 'div'>(
default: { backgroundColor: 'var(--ui-color-bg-surface)' },
dark: { backgroundColor: 'var(--ui-color-bg-base)' },
muted: { backgroundColor: 'var(--ui-color-bg-surface-muted)' },
precision: {
backgroundColor: 'var(--ui-color-bg-surface)',
border: '1px solid var(--ui-color-border-default)',
boxShadow: 'inset 0 1px 0 0 rgba(255, 255, 255, 0.02)'
},
glass: {
backgroundColor: 'rgba(20, 22, 25, 0.6)',
backdropFilter: 'blur(12px)',

12
apps/website/ui/TopNav.tsx
View File

@@ -1,17 +1,17 @@
import React from 'react';
import { Box } from './Box';
interface TopNavProps {
children: React.ReactNode;
className?: string;
}
/**
* TopNav is a horizontal navigation container used within the AppHeader.
* TopNav is a horizontal navigation container used within the ControlBar.
*/
export function TopNav({ children, className = '' }: TopNavProps) {
export function TopNav({ children }: TopNavProps) {
return (
<nav className={`flex items-center justify-between w-full ${className}`}>
<Box as="nav" display="flex" alignItems="center" justifyContent="between" width="full" height="full">
{children}
</nav>
</Box>
);
}
}

5
apps/website/ui/theme/theme.css
View File

@@ -6,6 +6,7 @@
--ui-color-border-default: #23272B;
--ui-color-border-muted: rgba(35, 39, 43, 0.5);
--ui-color-border-bright: #3A3F45;
--ui-color-text-high: #FFFFFF;
--ui-color-text-med: #A1A1AA;
@@ -16,6 +17,10 @@
--ui-color-intent-warning: #FFBE4D;
--ui-color-intent-success: #6FE37A;
--ui-color-intent-critical: #E35C5C;
/* Glows */
--ui-glow-primary: 0 0 15px rgba(25, 140, 255, 0.3);
--ui-glow-telemetry: 0 0 15px rgba(78, 212, 224, 0.3);
--ui-radius-none: 0;
--ui-radius-sm: 0.125rem;