| import React from 'react'; | |
| const Card = ({ children, className = '', title, icon: Icon }) => { | |
| return ( | |
| <div className={`bg-white dark:bg-slate-800 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-2xl dark:shadow-slate-900/50 transition-all duration-300 transform hover:scale-[1.01] border border-gray-300 dark:border-slate-700 ${className}`}> | |
| {title && ( | |
| <div className="border-b border-gray-300 dark:border-slate-700 px-6 py-4 bg-gradient-to-r from-gray-100 via-gray-50 to-transparent dark:from-slate-700/50 dark:to-transparent"> | |
| <div className="flex items-center space-x-3"> | |
| {Icon && ( | |
| <div className="bg-gradient-to-br from-emerald-500/30 to-cyan-500/30 dark:bg-emerald-500/20 p-2 rounded-lg"> | |
| <Icon className="text-emerald-700 dark:text-emerald-400 text-xl" /> | |
| </div> | |
| )} | |
| <h3 className="text-xl font-bold text-gray-900 dark:text-slate-100">{title}</h3> | |
| </div> | |
| </div> | |
| )} | |
| <div className="p-6"> | |
| {children} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default Card; | |