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-15 19:55:46 +01:00
parent 5ef149b782
commit ce7be39155
154 changed files with 436 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/website/ui/Card.tsx
View File

@@ -1,20 +1,26 @@
import React, { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
import React, { ReactNode, MouseEventHandler } from 'react';
import { Box, BoxProps } from './Box';
type Spacing = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
interface ResponsiveSpacing {
base?: Spacing;
md?: Spacing;
lg?: Spacing;
}
interface CardProps extends Omit<BoxProps<'div'>, 'children' | 'className' | 'onClick'> {
children: ReactNode;
className?: string;
onClick?: MouseEventHandler<HTMLDivElement>;
variant?: 'default' | 'highlight';
p?: Spacing | any;
px?: Spacing | any;
py?: Spacing | any;
pt?: Spacing | any;
pb?: Spacing | any;
pl?: Spacing | any;
pr?: Spacing | any;
p?: Spacing | ResponsiveSpacing;
px?: Spacing | ResponsiveSpacing;
py?: Spacing | ResponsiveSpacing;
pt?: Spacing | ResponsiveSpacing;
pb?: Spacing | ResponsiveSpacing;
pl?: Spacing | ResponsiveSpacing;
pr?: Spacing | ResponsiveSpacing;
}
export function Card({
@@ -22,7 +28,6 @@ export function Card({
className = '',
onClick,
variant = 'default',
p, px, py, pt, pb, pl, pr,
...props
}: CardProps) {
const baseClasses = 'rounded-lg shadow-card border duration-200';
@@ -32,29 +37,24 @@ export function Card({
highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 border-blue-500/30'
};
const spacingMap: Record<number, string> = {
0: '0', 0.5: '0.5', 1: '1', 1.5: '1.5', 2: '2', 2.5: '2.5', 3: '3', 3.5: '3.5', 4: '4',
5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 14: '14',
16: '16', 20: '20', 24: '24', 28: '28', 32: '32', 36: '36', 40: '40', 44: '44',
48: '48', 52: '52', 56: '56', 60: '60', 64: '64', 72: '72', 80: '80', 96: '96'
};
const classes = [
baseClasses,
variantClasses[variant],
onClick ? 'cursor-pointer hover:scale-[1.02]' : '',
p !== undefined ? `p-${spacingMap[p]}` : (px === undefined && py === undefined && pt === undefined && pb === undefined && pl === undefined && pr === undefined ? 'p-6' : ''),
px !== undefined ? `px-${spacingMap[px]}` : '',
py !== undefined ? `py-${spacingMap[py]}` : '',
pt !== undefined ? `pt-${spacingMap[pt]}` : '',
pb !== undefined ? `pb-${spacingMap[pb]}` : '',
pl !== undefined ? `pl-${spacingMap[pl]}` : '',
pr !== undefined ? `pr-${spacingMap[pr]}` : '',
className
].filter(Boolean).join(' ');
// Default padding if none provided
const hasPadding = props.p !== undefined || props.px !== undefined || props.py !== undefined ||
props.pt !== undefined || props.pb !== undefined || props.pl !== undefined || props.pr !== undefined;
return (
<Box className={classes} onClick={onClick as any} {...props}>
<Box
className={classes}
onClick={onClick}
p={hasPadding ? undefined : 6}
{...props}
>
{children}
</Box>
);