28 lines
737 B
TypeScript
28 lines
737 B
TypeScript
|
import { motion } from 'framer-motion';
|
||
|
|
import { ReactNode } from 'react';
|
||
|
|
|
||
|
|
interface CardProps {
|
||
|
|
children: ReactNode;
|
||
|
|
className?: string;
|
||
|
|
hover?: boolean;
|
||
|
|
onClick?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Card = ({ children, className = '', hover = true, onClick }: CardProps) => {
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
whileHover={hover ? { y: -5, transition: { duration: 0.2 } } : undefined}
|
||
|
|
className={`
|
||
|
|
bg-white dark:bg-gray-800
|
||
|
|
rounded-xl shadow-lg
|
||
|
|
overflow-hidden
|
||
|
|
border border-gray-100 dark:border-gray-700
|
||
|
|
${hover ? 'cursor-pointer' : ''}
|
||
|
|
${className}
|
||
|
|
`}
|
||
|
|
onClick={onClick}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|