44 lines
963 B
TypeScript
44 lines
963 B
TypeScript
import React from 'react';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
title?: React.ReactNode;
|
|
icon?: string;
|
|
extra?: React.ReactNode;
|
|
className?: string;
|
|
bodyClassName?: string;
|
|
noDivider?: boolean;
|
|
}
|
|
|
|
export function Card({
|
|
children,
|
|
title,
|
|
icon,
|
|
extra,
|
|
className = '',
|
|
bodyClassName = '',
|
|
noDivider = true,
|
|
}: CardProps) {
|
|
return (
|
|
<div className={`card ${className}`}>
|
|
{(title || extra) && (
|
|
<div className={`card-header ${noDivider ? '' : 'border-b border-gray-100'}`}>
|
|
{title && (
|
|
<div className="card-title">
|
|
{icon && <i className={`${icon} mr-2`}></i>}
|
|
<span>{title}</span>
|
|
</div>
|
|
)}
|
|
{extra && (
|
|
<div className="card-extra">
|
|
{extra}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className={`card-body ${bodyClassName}`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|