website refactor
This commit is contained in:
@@ -7,37 +7,60 @@ export interface CardProps {
|
||||
variant?: 'default' | 'muted' | 'outline' | 'glass' | 'dark' | 'precision' | 'bordered' | 'elevated' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
|
||||
title?: string | ReactNode;
|
||||
footer?: ReactNode;
|
||||
padding?: Spacing | number | any;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
bg?: string;
|
||||
p?: number;
|
||||
padding?: 'none' | 'sm' | 'md' | 'lg' | number;
|
||||
onClick?: () => void;
|
||||
responsiveColSpan?: { lg: number };
|
||||
overflow?: string;
|
||||
rounded?: string | boolean;
|
||||
borderLeft?: boolean;
|
||||
borderColor?: string;
|
||||
center?: boolean;
|
||||
transition?: string | boolean;
|
||||
hoverBorderColor?: string;
|
||||
border?: boolean;
|
||||
position?: string;
|
||||
mb?: number;
|
||||
display?: string;
|
||||
alignItems?: string;
|
||||
gap?: number;
|
||||
fullHeight?: boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
className?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
style?: React.CSSProperties;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
p?: number;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
py?: number;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
mb?: number;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
bg?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
borderColor?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
hoverBorderColor?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
border?: boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
position?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
overflow?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
center?: boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
rounded?: string | boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
transition?: string | boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
group?: boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
responsiveColSpan?: { lg: number };
|
||||
/** @deprecated Use semantic props instead. */
|
||||
backgroundColor?: string;
|
||||
group?: boolean | any;
|
||||
w?: string | any;
|
||||
justifyContent?: string | any;
|
||||
fullHeight?: boolean | any;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
w?: string | number;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
display?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
alignItems?: string;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
gap?: number;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
borderLeft?: boolean;
|
||||
/** @deprecated Use semantic props instead. */
|
||||
justifyContent?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card - Redesigned for "Modern Precision" theme.
|
||||
* Includes extensive compatibility props to prevent app-wide breakage.
|
||||
* Enforces semantic props.
|
||||
*/
|
||||
export const Card = forwardRef<HTMLDivElement, CardProps>(({
|
||||
children,
|
||||
@@ -45,28 +68,31 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
|
||||
title,
|
||||
footer,
|
||||
padding = 'md',
|
||||
className,
|
||||
style,
|
||||
bg,
|
||||
p,
|
||||
onClick,
|
||||
responsiveColSpan,
|
||||
overflow,
|
||||
rounded,
|
||||
borderLeft,
|
||||
fullHeight,
|
||||
className,
|
||||
style: styleProp,
|
||||
p,
|
||||
py,
|
||||
mb,
|
||||
bg,
|
||||
borderColor,
|
||||
center,
|
||||
transition,
|
||||
hoverBorderColor,
|
||||
border,
|
||||
position,
|
||||
mb,
|
||||
overflow,
|
||||
center,
|
||||
rounded,
|
||||
transition,
|
||||
group,
|
||||
responsiveColSpan,
|
||||
backgroundColor,
|
||||
w,
|
||||
display,
|
||||
alignItems,
|
||||
gap,
|
||||
py,
|
||||
backgroundColor,
|
||||
fullHeight,
|
||||
borderLeft,
|
||||
justifyContent,
|
||||
}, ref) => {
|
||||
const variantClasses = {
|
||||
default: 'bg-[var(--ui-color-bg-surface)] border-[var(--ui-color-border-default)] shadow-sm',
|
||||
@@ -83,61 +109,69 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(({
|
||||
'rarity-legendary': 'bg-orange-500/10 border-orange-500/50',
|
||||
};
|
||||
|
||||
const paddingClasses = {
|
||||
const paddingClasses: Record<string, string> = {
|
||||
none: 'p-0',
|
||||
sm: 'p-2',
|
||||
md: 'p-4',
|
||||
lg: 'p-8',
|
||||
};
|
||||
|
||||
const getPaddingClass = (pad: any) => {
|
||||
if (typeof pad === 'string') return `p-${pad}`;
|
||||
return ''; // Handled in style
|
||||
};
|
||||
const classes = [
|
||||
'border',
|
||||
variantClasses[variant as keyof typeof variantClasses] || variantClasses.default,
|
||||
typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : '',
|
||||
onClick ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)] transition-all duration-200' : '',
|
||||
fullHeight ? 'h-full flex flex-col' : '',
|
||||
group ? 'group' : '',
|
||||
rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none'),
|
||||
className,
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
const combinedStyle: React.CSSProperties = {
|
||||
...style,
|
||||
const style: React.CSSProperties = {
|
||||
...(typeof padding === 'number' ? { padding: `${padding * 0.25}rem` } : {}),
|
||||
...(p !== undefined ? { padding: `${p * 0.25}rem` } : {}),
|
||||
...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
|
||||
...(mb !== undefined ? { marginBottom: `${mb * 0.25}rem` } : {}),
|
||||
...(bg ? { backgroundColor: bg.startsWith('bg-') ? undefined : bg } : {}),
|
||||
...(backgroundColor ? { backgroundColor } : {}),
|
||||
...(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 } : {}),
|
||||
...(borderColor ? { borderColor: borderColor.startsWith('border-') ? undefined : borderColor } : {}),
|
||||
...(borderLeft ? { borderLeft: `4px solid ${borderColor || 'var(--ui-color-intent-primary)'}` } : {}),
|
||||
...(hoverBorderColor ? { '--hover-border-color': hoverBorderColor } as any : {}),
|
||||
...(border === false ? { border: 'none' } : {}),
|
||||
...(position ? { position: position as any } : {}),
|
||||
...(overflow ? { overflow } : {}),
|
||||
...(center ? { display: 'flex', alignItems: 'center', justifyContent: 'center' } : {}),
|
||||
...(typeof transition === 'string' ? { transition } : {}),
|
||||
...(position ? { position: position as any } : {}),
|
||||
...(mb !== undefined ? { marginBottom: `${mb * 0.25}rem` } : {}),
|
||||
...(responsiveColSpan?.lg ? { gridColumn: `span ${responsiveColSpan.lg} / span ${responsiveColSpan.lg}` } : {}),
|
||||
...(w !== undefined ? { width: w } : {}),
|
||||
...(display ? { display } : {}),
|
||||
...(alignItems ? { alignItems } : {}),
|
||||
...(justifyContent ? { justifyContent } : {}),
|
||||
...(gap !== undefined ? { gap: `${gap * 0.25}rem` } : {}),
|
||||
...(border === false ? { border: 'none' } : {}),
|
||||
...(fullHeight ? { height: '100%' } : {}),
|
||||
...(borderLeft ? { borderLeft: `4px solid var(--ui-color-intent-primary)` } : {}),
|
||||
...(styleProp || {}),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`border ${variantClasses[variant as keyof typeof variantClasses] || variantClasses.default} ${getPaddingClass(padding)} ${onClick ? 'cursor-pointer hover:border-[var(--ui-color-border-bright)]' : ''} ${transition === true ? 'transition-all duration-200' : ''} ${rounded === true ? 'rounded-full' : (typeof rounded === 'string' ? `rounded-${rounded}` : 'rounded-none')} ${className || ''}`}
|
||||
style={combinedStyle}
|
||||
className={classes}
|
||||
onClick={onClick}
|
||||
style={Object.keys(style).length > 0 ? style : undefined}
|
||||
>
|
||||
{title && (
|
||||
<div className={`border-b border-[var(--ui-color-border-muted)] ${getPaddingClass(padding)}`}>
|
||||
<div className={`border-b border-[var(--ui-color-border-muted)] ${typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : ''}`}>
|
||||
{typeof title === 'string' ? (
|
||||
<Heading level={5} weight="bold" uppercase>{title}</Heading>
|
||||
) : title}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`${typeof padding === 'number' || p !== undefined ? '' : getPaddingClass(padding)} ${fullHeight ? 'h-full flex flex-col' : ''}`}>
|
||||
<div className={fullHeight ? 'h-full flex flex-col' : ''}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${getPaddingClass(padding)}`}>
|
||||
<div className={`border-t border-[var(--ui-color-border-muted)] bg-white/[0.02] ${typeof padding === 'string' ? (paddingClasses[padding] || paddingClasses.md) : ''}`}>
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user