88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import React, { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
import { Box, BoxProps } from './Box';
|
|
|
|
interface SurfaceProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children' | 'className' | 'display'> {
|
|
as?: T;
|
|
children: ReactNode;
|
|
variant?: 'default' | 'muted' | 'dark' | 'glass' | 'gradient-blue' | 'gradient-gold' | 'gradient-purple' | 'gradient-green' | 'discord' | 'discord-inner';
|
|
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
border?: boolean;
|
|
padding?: number;
|
|
className?: string;
|
|
display?: 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'none';
|
|
shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'discord' | string;
|
|
}
|
|
|
|
export function Surface<T extends ElementType = 'div'>({
|
|
as,
|
|
children,
|
|
variant = 'default',
|
|
rounded = 'none',
|
|
border = false,
|
|
padding = 0,
|
|
className = '',
|
|
display,
|
|
shadow = 'none',
|
|
...props
|
|
}: SurfaceProps<T> & ComponentPropsWithoutRef<T>) {
|
|
const variantClasses: Record<string, string> = {
|
|
default: 'bg-panel-gray',
|
|
muted: 'bg-panel-gray/40',
|
|
dark: 'bg-graphite-black',
|
|
glass: 'bg-graphite-black/60 backdrop-blur-md',
|
|
'gradient-blue': 'bg-gradient-to-br from-primary-accent/10 via-panel-gray/80 to-graphite-black',
|
|
'gradient-gold': 'bg-gradient-to-br from-warning-amber/10 via-panel-gray/80 to-graphite-black',
|
|
'gradient-purple': 'bg-gradient-to-br from-purple-600/10 via-panel-gray/80 to-graphite-black',
|
|
'gradient-green': 'bg-gradient-to-br from-success-green/10 via-panel-gray/80 to-graphite-black',
|
|
'discord': 'bg-gradient-to-b from-graphite-black to-panel-gray',
|
|
'discord-inner': 'bg-gradient-to-br from-panel-gray via-graphite-black to-panel-gray'
|
|
};
|
|
|
|
const shadowClasses: Record<string, string> = {
|
|
none: '',
|
|
sm: 'shadow-sm',
|
|
md: 'shadow-md',
|
|
lg: 'shadow-lg',
|
|
xl: 'shadow-xl',
|
|
discord: 'shadow-[0_0_80px_rgba(88,101,242,0.15)]'
|
|
};
|
|
|
|
const roundedClasses: Record<string, string> = {
|
|
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-border-gray' : '',
|
|
paddingClasses[padding] || 'p-0',
|
|
shadowClasses[shadow],
|
|
display ? display : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as={as} className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|