71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
|
|
export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?: 'default' | 'hover' | 'gradient'
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
({ variant = 'default', className = '', children, ...props }, ref) => {
|
|
const baseStyles = 'rounded-xl p-6 duration-500'
|
|
|
|
const variantStyles = {
|
|
default: 'bg-white dark:bg-slate-900 shadow dark:shadow-gray-800',
|
|
hover: 'bg-white dark:bg-slate-900 hover:shadow dark:hover:shadow-gray-800',
|
|
gradient: 'bg-gradient-to-t from-indigo-600 to-indigo-500 shadow-lg',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`${baseStyles} ${variantStyles[variant]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
Card.displayName = 'Card'
|
|
|
|
export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
|
|
({ className = '', children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`pb-4 border-b border-gray-100 dark:border-gray-800 ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
CardHeader.displayName = 'CardHeader'
|
|
|
|
export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(
|
|
({ className = '', children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={`pt-4 ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
CardBody.displayName = 'CardBody'
|