38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
title?: string;
|
|
description?: string;
|
|
actions?: React.ReactNode;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export const Card: React.FC<CardProps> = ({ children, className, title, description, actions, onClick }) => {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={twMerge(
|
|
'glass-card rounded-[24px] p-6 border border-white/5',
|
|
'hover:border-primary/20 hover:shadow-lg transition-all duration-500',
|
|
onClick ? 'cursor-pointer active:scale-[0.98]' : '',
|
|
className
|
|
)}
|
|
>
|
|
{(title || actions) && (
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
{title && <h3 className="text-xl font-bold text-text-main tracking-tight">{title}</h3>}
|
|
{description && <p className="text-sm text-text-muted font-medium mt-1">{description}</p>}
|
|
</div>
|
|
{actions && <div className="flex gap-2">{actions}</div>}
|
|
</div>
|
|
)}
|
|
<div className="text-text-main">{children}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|