collect-system/apps/web/src/components/presentation/container/Card.tsx

28 lines
700 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
rounded-xl shadow-lg
overflow-hidden
border border-gray-100
${hover ? 'cursor-pointer' : ''}
${className}
`}
onClick={onClick}
>
{children}
</motion.div>
);
};