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 15:12:28 +01:00
parent a972bb4195
commit 94aaaff704
25 changed files with 793 additions and 574 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,13 @@
import React, { ReactNode, forwardRef } from 'react';
import { Heading } from './Heading';
import { Spacing } from './Box';
export interface CardProps {
children: ReactNode;
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | any;
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
title?: string | ReactNode;
footer?: ReactNode;
padding?: 'none' | 'sm' | 'md' | 'lg' | number | any;
padding?: Spacing | number | any;
className?: string;
style?: React.CSSProperties;
bg?: string;
@@ -28,6 +29,9 @@ export interface CardProps {
gap?: number;
py?: number;
backgroundColor?: string;
group?: boolean | any;
w?: string | any;
justifyContent?: string | any;
}
/**
@@ -68,6 +72,13 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
outline: 'bg-transparent border-[var(--ui-color-border-default)]',
glass: 'bg-white/[0.03] backdrop-blur-md border-white/[0.05]',
dark: 'bg-[var(--ui-color-bg-base)] border-[var(--ui-color-border-default)]',
precision: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.02)]',
bordered: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)]',
elevated: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-md',
'rarity-common': 'bg-gray-500/10 border-gray-500/50',
'rarity-rare': 'bg-blue-500/10 border-blue-500/50',
'rarity-epic': 'bg-purple-500/10 border-purple-500/50',
'rarity-legendary': 'bg-orange-500/10 border-orange-500/50',
};
const paddingClasses = {
@@ -78,7 +89,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
};
const getPaddingClass = (pad: any) => {
if (typeof pad === 'string') return paddingClasses[pad as keyof typeof paddingClasses] || paddingClasses.md;
if (typeof pad === 'string') return `p-${pad}`;
return ''; // Handled in style
};
@@ -86,8 +97,8 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
...style,
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
...(backgroundColor ? { backgroundColor } : {}),
...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
...(p !== undefined ? { padding: typeof p === 'number' ? `${p * 0.25}rem` : undefined } : {}),
...(py !== undefined ? { paddingTop: typeof py === 'number' ? `${py * 0.25}rem` : undefined, paddingBottom: typeof py === 'number' ? `${py * 0.25}rem` : undefined } : {}),
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
...(overflow ? { overflow } : {}),