| 'use client' |
|
|
| import { forwardRef, HTMLAttributes } from 'react' |
| import { cn } from '@/utils/helpers' |
|
|
| export interface CardProps extends HTMLAttributes<HTMLDivElement> { |
| variant?: 'default' | 'outlined' | 'elevated' |
| } |
|
|
| export const Card = forwardRef<HTMLDivElement, CardProps>( |
| ({ className, variant = 'default', children, ...props }, ref) => { |
| const variants = { |
| default: 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700', |
| outlined: 'bg-transparent border-2 border-gray-300 dark:border-gray-600', |
| elevated: 'bg-white dark:bg-gray-800 shadow-lg border-none', |
| } |
|
|
| return ( |
| <div |
| ref={ref} |
| className={cn('rounded-lg', variants[variant], className)} |
| {...props} |
| > |
| {children} |
| </div> |
| ) |
| } |
| ) |
|
|
| Card.displayName = 'Card' |
|
|
| export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
| ({ className, children, ...props }, ref) => ( |
| <div ref={ref} className={cn('px-6 py-4 border-b border-gray-200 dark:border-gray-700', className)} {...props}> |
| {children} |
| </div> |
| ) |
| ) |
|
|
| CardHeader.displayName = 'CardHeader' |
|
|
| export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>( |
| ({ className, children, ...props }, ref) => ( |
| <h3 ref={ref} className={cn('text-lg font-semibold text-gray-900 dark:text-gray-100', className)} {...props}> |
| {children} |
| </h3> |
| ) |
| ) |
|
|
| CardTitle.displayName = 'CardTitle' |
|
|
| export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>( |
| ({ className, children, ...props }, ref) => ( |
| <p ref={ref} className={cn('text-sm text-gray-500 dark:text-gray-400 mt-1', className)} {...props}> |
| {children} |
| </p> |
| ) |
| ) |
|
|
| CardDescription.displayName = 'CardDescription' |
|
|
| export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
| ({ className, children, ...props }, ref) => ( |
| <div ref={ref} className={cn('px-6 py-4', className)} {...props}> |
| {children} |
| </div> |
| ) |
| ) |
|
|
| CardContent.displayName = 'CardContent' |
|
|
| export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( |
| ({ className, children, ...props }, ref) => ( |
| <div ref={ref} className={cn('px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center gap-2', className)} {...props}> |
| {children} |
| </div> |
| ) |
| ) |
|
|
| CardFooter.displayName = 'CardFooter' |
