74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React, { ReactNode, forwardRef } from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface, SurfaceProps } from './Surface';
|
|
|
|
export interface CardProps extends Omit<SurfaceProps<'div'>, 'children' | 'title' | 'variant'> {
|
|
children: ReactNode;
|
|
variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline' | 'rarity-common' | 'rarity-rare' | 'rarity-epic' | 'rarity-legendary';
|
|
title?: ReactNode;
|
|
footer?: ReactNode;
|
|
}
|
|
|
|
export const Card = forwardRef<HTMLDivElement, CardProps>(({
|
|
children,
|
|
variant = 'default',
|
|
title,
|
|
footer,
|
|
...props
|
|
}, ref) => {
|
|
const isOutline = variant === 'outline';
|
|
|
|
const style: React.CSSProperties = isOutline ? {
|
|
backgroundColor: 'transparent',
|
|
border: '1px solid var(--ui-color-border-default)',
|
|
} : {};
|
|
|
|
return (
|
|
<Surface
|
|
ref={ref}
|
|
variant={isOutline ? 'default' : variant}
|
|
rounded="lg"
|
|
shadow="md"
|
|
style={style}
|
|
{...props}
|
|
>
|
|
{title && (
|
|
<Box padding={4} borderBottom>
|
|
{typeof title === 'string' ? (
|
|
<h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>
|
|
) : title}
|
|
</Box>
|
|
)}
|
|
|
|
<Box padding={4}>
|
|
{children}
|
|
</Box>
|
|
|
|
{footer && (
|
|
<Box padding={4} borderTop bg="rgba(255,255,255,0.02)">
|
|
{footer}
|
|
</Box>
|
|
)}
|
|
</Surface>
|
|
);
|
|
});
|
|
|
|
Card.displayName = 'Card';
|
|
|
|
export const CardHeader = ({ title, children }: { title?: string, children?: ReactNode }) => (
|
|
<Box marginBottom={4}>
|
|
{title && <h3 className="text-lg font-bold text-[var(--ui-color-text-high)]">{title}</h3>}
|
|
{children}
|
|
</Box>
|
|
);
|
|
|
|
export const CardContent = ({ children }: { children: ReactNode }) => (
|
|
<Box>{children}</Box>
|
|
);
|
|
|
|
export const CardFooter = ({ children }: { children: ReactNode }) => (
|
|
<Box marginTop={4} paddingTop={4} borderTop>
|
|
{children}
|
|
</Box>
|
|
);
|