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

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

@@ -1,14 +1,13 @@
import React, { ReactNode, MouseEventHandler, ButtonHTMLAttributes, forwardRef } from 'react';
import React, { ReactNode, MouseEventHandler, forwardRef } from 'react';
import { Stack } from './primitives/Stack';
import { Box, BoxProps } from './primitives/Box';
import { Loader2 } from 'lucide-react';
import { Icon } from './Icon';
import { Loader2 } from 'lucide-react';
import { ResponsiveValue } from './primitives/Box';
interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'onMouseEnter' | 'onMouseLeave' | 'onSubmit' | 'role' | 'translate' | 'onScroll' | 'draggable' | 'onChange' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'value' | 'onBlur' | 'onKeyDown'>, Omit<BoxProps<'button'>, 'as' | 'onClick' | 'onSubmit'> {
export interface ButtonProps {
children: ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement>;
className?: string;
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-final' | 'discord';
onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'success' | 'discord' | 'race-final';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
isLoading?: boolean;
@@ -19,14 +18,25 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as'
href?: string;
target?: string;
rel?: string;
className?: string;
style?: React.CSSProperties;
width?: string | number | ResponsiveValue<string | number>;
height?: string | number | ResponsiveValue<string | number>;
minWidth?: string | number;
px?: number;
py?: number;
p?: number;
rounded?: string;
bg?: string;
color?: string;
fontSize?: string;
backgroundColor?: string;
h?: string;
w?: string;
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(({
children,
onClick,
className = '',
variant = 'primary',
size = 'md',
disabled = false,
@@ -38,25 +48,37 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
href,
target,
rel,
className,
style: styleProp,
width,
height,
minWidth,
px,
py,
p,
rounded,
bg,
color,
fontSize,
backgroundColor,
...props
h,
w,
}, ref) => {
const baseClasses = 'inline-flex items-center justify-center rounded-none transition-all duration-150 ease-smooth focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
const baseClasses = 'inline-flex items-center justify-center rounded-none transition-all duration-150 ease-in-out focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 active:opacity-80 uppercase tracking-widest font-bold';
const variantClasses = {
primary: 'bg-primary-accent text-white hover:bg-primary-accent/90 focus-visible:outline-primary-accent shadow-[0_0_15px_rgba(25,140,255,0.3)] hover:shadow-[0_0_25px_rgba(25,140,255,0.5)]',
secondary: 'bg-panel-gray text-white border border-border-gray hover:bg-border-gray/50 focus-visible:outline-primary-accent',
danger: 'bg-critical-red text-white hover:bg-critical-red/90 focus-visible:outline-critical-red',
ghost: 'bg-transparent text-gray-400 hover:text-white hover:bg-white/5 focus-visible:outline-gray-400',
'race-final': 'bg-success-green text-graphite-black hover:bg-success-green/90 focus-visible:outline-success-green',
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)]',
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]',
};
const sizeClasses = {
sm: 'min-h-[32px] px-3 py-1 text-xs font-medium',
md: 'min-h-[40px] px-4 py-2 text-sm font-medium',
lg: 'min-h-[48px] px-6 py-3 text-base font-medium'
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'
};
const disabledClasses = (disabled || isLoading) ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer';
@@ -71,8 +93,18 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
className
].filter(Boolean).join(' ');
const style: React.CSSProperties = {
...(width ? { width: typeof width === 'object' ? undefined : width } : {}),
...(height ? { height: typeof height === 'object' ? undefined : height } : {}),
...(minWidth ? { minWidth } : {}),
...(fontSize ? { fontSize } : {}),
...(h ? { height: h } : {}),
...(w ? { width: w } : {}),
...(styleProp || {})
};
const content = (
<Stack direction="row" align="center" gap={2} center={fullWidth}>
<Stack direction="row" align="center" gap={2}>
{isLoading && <Icon icon={Loader2} size={size === 'sm' ? 3 : 4} animate="spin" />}
{!isLoading && icon}
{children}
@@ -81,35 +113,31 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
if (as === 'a') {
return (
<Box
as="a"
<a
ref={ref as React.ForwardedRef<HTMLAnchorElement>}
href={href}
target={target}
rel={rel}
className={classes}
fontSize={fontSize}
backgroundColor={backgroundColor}
{...props}
onClick={onClick as MouseEventHandler<HTMLAnchorElement>}
style={style}
>
{content}
</Box>
</a>
);
}
return (
<Box
as="button"
ref={ref}
<button
ref={ref as React.ForwardedRef<HTMLButtonElement>}
type={type}
className={classes}
onClick={onClick}
onClick={onClick as MouseEventHandler<HTMLButtonElement>}
disabled={disabled || isLoading}
fontSize={fontSize}
backgroundColor={backgroundColor}
{...props}
style={style}
>
{content}
</Box>
</button>
);
});