89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '../utils/helpers';
|
|
import type { ComponentBaseProps } from '../types';
|
|
import styles from './Card.module.css';
|
|
|
|
export interface CardProps extends ComponentBaseProps {
|
|
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
hoverable?: boolean;
|
|
onClick?: () => void;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export interface CardSectionProps extends ComponentBaseProps {
|
|
noPadding?: boolean;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
({ padding = 'md', hoverable = false, onClick, children, className, style, id }, ref) => {
|
|
const classes = cn(
|
|
styles.card,
|
|
padding && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
|
|
hoverable && styles.hoverable,
|
|
onClick && styles.clickable,
|
|
className
|
|
);
|
|
|
|
return (
|
|
<div ref={ref} className={classes} style={style} id={id} onClick={onClick}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Card.displayName = 'Card';
|
|
|
|
export const CardHeader = React.forwardRef<HTMLDivElement, CardSectionProps>(
|
|
({ noPadding = false, children, className, style, id }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(styles.header, noPadding && styles.noPadding, className)}
|
|
style={style}
|
|
id={id}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardHeader.displayName = 'CardHeader';
|
|
|
|
export const CardBody = React.forwardRef<HTMLDivElement, CardSectionProps>(
|
|
({ noPadding = false, children, className, style, id }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(styles.body, noPadding && styles.noPadding, className)}
|
|
style={style}
|
|
id={id}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardBody.displayName = 'CardBody';
|
|
|
|
export const CardFooter = React.forwardRef<HTMLDivElement, CardSectionProps>(
|
|
({ noPadding = false, children, className, style, id }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(styles.footer, noPadding && styles.noPadding, className)}
|
|
style={style}
|
|
id={id}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardFooter.displayName = 'CardFooter';
|
|
|