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:22:05 +01:00
parent f8e7ec7948
commit 30a31dc44f
21 changed files with 1242 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
apps/website/ui/Button.tsx
View File

@@ -6,48 +6,47 @@ import { Icon } from './Icon';
export interface ButtonProps {
children: ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'success' | 'discord' | 'race-final';
size?: 'sm' | 'md' | 'lg';
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'success' | 'discord' | 'race-final' | any;
size?: 'sm' | 'md' | 'lg' | any;
disabled?: boolean;
isLoading?: boolean;
type?: 'button' | 'submit' | 'reset';
icon?: ReactNode;
fullWidth?: boolean;
as?: 'button' | 'a';
as?: 'button' | 'a' | any;
href?: string;
target?: string;
rel?: string;
title?: string;
style?: React.CSSProperties;
rounded?: boolean | string;
className?: string;
bg?: string;
color?: string;
w?: string | number;
h?: string | number;
px?: number;
borderColor?: string;
mt?: number;
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
letterSpacing?: string;
hoverBorderColor?: string;
fontSize?: string;
p?: number;
minHeight?: string;
transition?: boolean;
ring?: string;
transform?: string;
hoverScale?: boolean;
overflow?: string;
borderWidth?: string;
aspectRatio?: string;
border?: boolean;
shadow?: string;
display?: string;
center?: boolean;
justifyContent?: string;
style?: React.CSSProperties;
rounded?: boolean | string | any;
mt?: number | any;
p?: number | any;
px?: number | any;
py?: number | any;
w?: string | number | any;
h?: string | number | any;
bg?: string | any;
color?: string | any;
borderColor?: string | any;
hoverBorderColor?: string | any;
letterSpacing?: string | any;
fontSize?: string | any;
transition?: boolean | any;
center?: boolean | any;
justifyContent?: string | any;
shadow?: string | any;
position?: string | any;
borderWidth?: string | any;
aspectRatio?: string | any;
border?: boolean | any;
}
/**
* Button - Redesigned for "Modern Precision" theme.
* Includes extensive compatibility props to prevent app-wide breakage.
*/
export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({
children,
onClick,
@@ -63,94 +62,80 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
target,
rel,
title,
style: styleProp,
rounded = false,
className,
bg,
color,
style,
rounded,
mt,
p,
px,
py,
w,
h,
px,
bg,
color,
borderColor,
mt,
position,
letterSpacing,
hoverBorderColor,
letterSpacing,
fontSize,
p,
minHeight,
transition,
ring,
transform,
hoverScale,
overflow,
center,
justifyContent,
shadow,
position,
borderWidth,
aspectRatio,
border,
shadow,
display,
center,
justifyContent,
}, ref) => {
const baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
const transitionClasses = transition !== false ? 'transition-all duration-150 ease-in-out' : '';
const baseClasses = 'inline-flex items-center justify-center focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold transition-all duration-150 ease-in-out';
const variantClasses = {
primary: 'bg-[var(--ui-color-intent-primary)] text-white hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-primary)] shadow-[0_0_15px_rgba(25,140,255,0.3)] hover:shadow-[0_0_25px_rgba(25,140,255,0.5)]',
primary: 'bg-[var(--ui-color-intent-primary)] text-white hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-primary)] shadow-[0_0_15px_rgba(25,140,255,0.2)]',
secondary: 'bg-[var(--ui-color-bg-surface)] text-white border border-[var(--ui-color-border-default)] hover:bg-[var(--ui-color-border-default)] focus-visible:outline-[var(--ui-color-intent-primary)]',
danger: 'bg-[var(--ui-color-intent-critical)] text-white hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-critical)]',
ghost: 'bg-transparent text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)] hover:bg-white/5 focus-visible:outline-[var(--ui-color-text-low)]',
success: 'bg-[var(--ui-color-intent-success)] text-[var(--ui-color-bg-base)] hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-success)]',
'race-final': 'bg-[var(--ui-color-intent-success)] text-[var(--ui-color-bg-base)] hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-success)]',
discord: 'bg-[#5865F2] text-white hover:bg-[#4752C4] focus-visible:outline-[#5865F2]',
'race-final': 'bg-[var(--ui-color-intent-success)] text-[var(--ui-color-bg-base)] hover:opacity-90 focus-visible:outline-[var(--ui-color-intent-success)]',
};
const sizeClasses = {
sm: 'min-h-[32px] px-3 py-1 text-xs',
md: 'min-h-[40px] px-4 py-2 text-sm',
lg: 'min-h-[48px] px-6 py-3 text-base'
sm: 'min-h-[32px] px-3 py-1 text-[10px]',
md: 'min-h-[40px] px-4 py-2 text-xs',
lg: 'min-h-[48px] px-6 py-3 text-sm'
};
const disabledClasses = (disabled || isLoading) ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
const widthClasses = fullWidth ? 'w-full' : '';
const roundedClasses = rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none');
const classes = [
baseClasses,
transitionClasses,
variantClasses[variant],
sizeClasses[size],
variantClasses[variant as keyof typeof variantClasses] || variantClasses.primary,
sizeClasses[size as keyof typeof sizeClasses] || sizeClasses.md,
disabledClasses,
widthClasses,
roundedClasses,
ring,
hoverScale ? 'hover:scale-105' : '',
display === 'flex' ? 'flex' : '',
rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none'),
center ? 'items-center justify-center' : '',
justifyContent ? `justify-${justifyContent}` : '',
className,
].filter(Boolean).join(' ');
const style: React.CSSProperties = {
...styleProp,
const combinedStyle: React.CSSProperties = {
...style,
...(mt !== undefined ? { marginTop: typeof mt === 'number' ? `${mt * 0.25}rem` : mt } : {}),
...(p !== undefined ? { padding: typeof p === 'number' ? `${p * 0.25}rem` : p } : {}),
...(px !== undefined ? { paddingLeft: typeof px === 'number' ? `${px * 0.25}rem` : px, paddingRight: typeof px === 'number' ? `${px * 0.25}rem` : px } : {}),
...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : py, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : py } : {}),
...(w !== undefined ? { width: w } : {}),
...(h !== undefined ? { height: h } : {}),
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(color ? { color: color.startsWith('text-') ? undefined : color } : {}),
...(w ? { width: w } : {}),
...(h ? { height: h } : {}),
...(px ? { paddingLeft: `${px * 0.25}rem`, paddingRight: `${px * 0.25}rem` } : {}),
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor, borderStyle: 'solid', borderWidth: '1px' } : {}),
...(mt ? { marginTop: `${mt * 0.25}rem` } : {}),
...(position ? { position } : {}),
...(letterSpacing ? { letterSpacing } : {}),
...(fontSize ? { fontSize } : {}),
...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
...(minHeight ? { minHeight } : {}),
...(transform ? { transform } : {}),
...(overflow ? { overflow } : {}),
...(justifyContent ? { justifyContent } : {}),
...(shadow ? { boxShadow: shadow } : {}),
...(position ? { position } : {}),
...(borderWidth ? { borderWidth } : {}),
...(aspectRatio ? { aspectRatio } : {}),
...(border ? { border: '1px solid var(--ui-color-border-default)' } : {}),
...(shadow ? { boxShadow: shadow.startsWith('shadow-') ? undefined : shadow } : {}),
};
const content = (
@@ -161,35 +146,23 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
</Box>
);
if (as === 'a') {
return (
<a
ref={ref as React.ForwardedRef<HTMLAnchorElement>}
href={href}
target={target}
rel={rel}
className={classes}
onClick={onClick as MouseEventHandler<HTMLAnchorElement>}
style={style}
title={title}
>
{content}
</a>
);
}
const Tag = as === 'a' ? 'a' : 'button';
return (
<button
ref={ref as React.ForwardedRef<HTMLButtonElement>}
type={type}
<Tag
ref={ref as any}
type={as === 'a' ? undefined : type}
href={as === 'a' ? href : undefined}
target={as === 'a' ? target : undefined}
rel={as === 'a' ? rel : undefined}
className={classes}
onClick={onClick as MouseEventHandler<HTMLButtonElement>}
disabled={disabled || isLoading}
style={style}
onClick={onClick as any}
disabled={as === 'a' ? undefined : (disabled || isLoading)}
style={combinedStyle}
title={title}
>
{content}
</button>
</Tag>
);
});