75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
import { cn } from '@utils/cn';
|
|
|
|
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Card({ children, className, ...props }: CardProps) {
|
|
return (
|
|
<div
|
|
className={cn('rounded-lg border bg-white shadow-sm', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function CardHeader({ children, className, ...props }: CardHeaderProps) {
|
|
return (
|
|
<div
|
|
className={cn('border-b px-6 py-4', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function CardTitle({ children, className, ...props }: CardTitleProps) {
|
|
return (
|
|
<h3
|
|
className={cn('text-lg font-semibold text-gray-900', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</h3>
|
|
);
|
|
}
|
|
|
|
export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function CardContent({ children, className, ...props }: CardContentProps) {
|
|
return (
|
|
<div className={cn('px-6 py-4', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function CardFooter({ children, className, ...props }: CardFooterProps) {
|
|
return (
|
|
<div
|
|
className={cn('border-t bg-gray-50 px-6 py-4', className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|