39 lines
840 B
TypeScript
39 lines
840 B
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
import './Card.css';
|
|
|
|
type Variant = 'default' | 'elevated' | 'outlined';
|
|
|
|
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
variant?: Variant;
|
|
header?: ReactNode;
|
|
footer?: ReactNode;
|
|
padding?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export function Card({
|
|
variant = 'default',
|
|
header,
|
|
footer,
|
|
padding = 'md',
|
|
className,
|
|
children,
|
|
...rest
|
|
}: Props) {
|
|
const classes = [
|
|
'ui-card',
|
|
`ui-card--${variant}`,
|
|
`ui-card--p-${padding}`,
|
|
className ?? '',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return (
|
|
<div className={classes} {...rest}>
|
|
{header ? <div className="ui-card__header">{header}</div> : null}
|
|
<div className="ui-card__body">{children}</div>
|
|
{footer ? <div className="ui-card__footer">{footer}</div> : null}
|
|
</div>
|
|
);
|
|
}
|