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 21:31:08 +01:00
parent 502d4aa092
commit b43a23a48c
96 changed files with 3461 additions and 4067 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
apps/website/ui/primitives/Surface.tsx
View File

@@ -1,5 +1,6 @@
import React, { ReactNode, ElementType, ComponentPropsWithoutRef, forwardRef, ForwardedRef } from 'react';
import React, { ReactNode, ElementType, forwardRef, ForwardedRef } from 'react';
import { Box, BoxProps } from './Box';
import { ThemeRadii, ThemeShadows } from '../theme/Theme';
/**
* WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
@@ -12,15 +13,12 @@ import { Box, BoxProps } from './Box';
* If you need a more specific layout, create a new component in apps/website/components.
*/
export interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'padding'> {
export interface SurfaceProps<T extends ElementType = 'div'> extends BoxProps<T> {
as?: T;
children?: ReactNode;
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string | boolean;
border?: boolean | string;
padding?: number;
className?: string;
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
variant?: 'default' | 'dark' | 'muted' | 'glass' | 'discord' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord-inner' | 'outline';
rounded?: keyof ThemeRadii | 'none';
shadow?: keyof ThemeShadows | 'none';
}
export const Surface = forwardRef(<T extends ElementType = 'div'>(
@@ -29,69 +27,52 @@ export const Surface = forwardRef(<T extends ElementType = 'div'>(
children,
variant = 'default',
rounded = 'none',
border = false,
padding = 0,
className = '',
shadow = 'none',
...props
}: SurfaceProps<T> & ComponentPropsWithoutRef<T>,
}: SurfaceProps<T>,
ref: ForwardedRef<HTMLElement>
) => {
const variantClasses: Record<string, string> = {
default: 'bg-panel-gray',
muted: 'bg-panel-gray/40',
dark: 'bg-graphite-black',
glass: 'bg-graphite-black/60 backdrop-blur-md',
'gradient-blue': 'bg-gradient-to-br from-primary-accent/10 via-panel-gray/80 to-graphite-black',
'gradient-gold': 'bg-gradient-to-br from-warning-amber/10 via-panel-gray/80 to-graphite-black',
'gradient-purple': 'bg-gradient-to-br from-purple-600/10 via-panel-gray/80 to-graphite-black',
'gradient-green': 'bg-gradient-to-br from-success-green/10 via-panel-gray/80 to-graphite-black',
'discord': 'bg-gradient-to-b from-graphite-black to-panel-gray',
'discord-inner': 'bg-gradient-to-br from-panel-gray via-graphite-black to-panel-gray'
const variantStyles: Record<string, React.CSSProperties> = {
default: { backgroundColor: 'var(--ui-color-bg-surface)' },
dark: { backgroundColor: 'var(--ui-color-bg-base)' },
muted: { backgroundColor: 'var(--ui-color-bg-surface-muted)' },
glass: {
backgroundColor: 'rgba(20, 22, 25, 0.6)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)'
},
discord: {
background: 'linear-gradient(to bottom, var(--ui-color-bg-base), var(--ui-color-bg-surface))'
},
'discord-inner': {
background: 'linear-gradient(to br, var(--ui-color-bg-surface), var(--ui-color-bg-base), var(--ui-color-bg-surface))'
},
'gradient-blue': {
background: 'linear-gradient(to br, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
'gradient-gold': {
background: 'linear-gradient(to br, rgba(255, 190, 77, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
'gradient-purple': {
background: 'linear-gradient(to br, rgba(147, 51, 234, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
'gradient-green': {
background: 'linear-gradient(to br, rgba(111, 227, 122, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))'
},
outline: {
backgroundColor: 'transparent',
border: '1px solid var(--ui-color-border-default)'
}
};
const shadowClasses: Record<string, string> = {
none: '',
sm: 'shadow-sm',
md: 'shadow-md',
lg: 'shadow-lg',
xl: 'shadow-xl',
discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
const style: React.CSSProperties = {
...variantStyles[variant],
borderRadius: rounded !== 'none' ? `var(--ui-radius-${String(rounded)})` : undefined,
boxShadow: shadow !== 'none' ? `var(--ui-shadow-${String(shadow)})` : undefined,
};
const roundedClasses: Record<string, string> = {
none: 'rounded-none',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
xl: 'rounded-xl',
'2xl': 'rounded-2xl',
full: 'rounded-full'
};
const paddingClasses: Record<number, string> = {
0: 'p-0',
1: 'p-1',
2: 'p-2',
3: 'p-3',
4: 'p-4',
6: 'p-6',
8: 'p-8',
10: 'p-10',
12: 'p-12'
};
const classes = [
variantClasses[variant],
typeof rounded === 'string' && roundedClasses[rounded] ? roundedClasses[rounded] : '',
border ? 'border border-border-gray' : '',
paddingClasses[padding] || 'p-0',
shadowClasses[shadow],
className
].filter(Boolean).join(' ');
return (
<Box as={as} ref={ref} className={classes} {...props}>
<Box as={as} ref={ref} {...(props as any)} style={style}>
{children}
</Box>
);