71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import React, { ReactNode, HTMLAttributes } from 'react';
|
|
import { Box } from './Box';
|
|
|
|
interface SurfaceProps extends HTMLAttributes<HTMLElement> {
|
|
children: ReactNode;
|
|
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple';
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
border?: boolean;
|
|
padding?: number;
|
|
className?: string;
|
|
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
|
|
}
|
|
|
|
export function Surface({
|
|
children,
|
|
variant = 'default',
|
|
rounded = 'lg',
|
|
border = false,
|
|
padding = 0,
|
|
className = '',
|
|
display,
|
|
...props
|
|
}: SurfaceProps) {
|
|
const variantClasses = {
|
|
default: 'bg-iron-gray',
|
|
muted: 'bg-iron-gray/50',
|
|
dark: 'bg-deep-graphite',
|
|
glass: 'bg-deep-graphite/60 backdrop-blur-md',
|
|
'gradient-blue': 'bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite',
|
|
'gradient-gold': 'bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite',
|
|
'gradient-purple': 'bg-gradient-to-br from-purple-600/20 via-iron-gray/80 to-deep-graphite'
|
|
};
|
|
|
|
const roundedClasses = {
|
|
none: 'rounded-none',
|
|
sm: 'rounded-sm',
|
|
md: 'rounded-md',
|
|
lg: 'rounded-lg',
|
|
xl: 'rounded-xl',
|
|
'2xl': 'rounded-2xl',
|
|
full: 'rounded-full'
|
|
};
|
|
|
|
const paddingClasses: Record<number, string> = {
|
|
0: 'p-0',
|
|
1: 'p-1',
|
|
2: 'p-2',
|
|
3: 'p-3',
|
|
4: 'p-4',
|
|
6: 'p-6',
|
|
8: 'p-8',
|
|
10: 'p-10',
|
|
12: 'p-12'
|
|
};
|
|
|
|
const classes = [
|
|
variantClasses[variant],
|
|
roundedClasses[rounded],
|
|
border ? 'border border-charcoal-outline' : '',
|
|
paddingClasses[padding] || 'p-0',
|
|
display ? display : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|