62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { type ReactNode } from 'react'
|
|
import { clsx } from 'clsx'
|
|
|
|
interface CardProps {
|
|
children: ReactNode
|
|
className?: string
|
|
hover?: boolean
|
|
}
|
|
|
|
export function Card({ children, className, hover = false }: CardProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'bg-dark-800 rounded-xl p-6 border border-dark-600',
|
|
hover && 'transition-all duration-300 hover:-translate-y-1 hover:border-neon-500/30 hover:shadow-[0_10px_40px_rgba(34,211,238,0.08)]',
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface CardHeaderProps {
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function CardHeader({ children, className }: CardHeaderProps) {
|
|
return (
|
|
<div className={clsx('mb-4', className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface CardTitleProps {
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function CardTitle({ children, className }: CardTitleProps) {
|
|
return (
|
|
<h3 className={clsx('text-xl font-bold text-white', className)}>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|
|
|
|
interface CardContentProps {
|
|
children: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function CardContent({ children, className }: CardContentProps) {
|
|
return (
|
|
<div className={clsx('text-gray-300', className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|