feat(ui): add EmptyState component

Author: maitamdev

src/components/ui/EmptyState.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-interface Props { icon?: React.ReactNode; title: string; description?: string; action?: React.ReactNode; className?: string; }
+import { motion } from 'framer-motion';
+interface Props { icon: React.ReactNode; title: string; description?: string; action?: { label: string; onClick: () => void }; className?: string; }
 const EmptyState: React.FC<Props> = ({ icon, title, description, action, className = '' }) => (
-  <div className={'flex flex-col items-center justify-center py-16 px-4 text-center ' + className}>
-    {icon && <div className='w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-6 text-3xl text-gray-400'>{icon}</div>}
-    <h3 className='text-xl font-semibold text-gray-900 dark:text-white mb-2'>{title}</h3>
-    {description && <p className='text-gray-500 max-w-md mb-6'>{description}</p>}
-    {action}
-  </div>
+  <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
+    className={'text-center py-16 px-4 ' + className}>
+    <div className='text-5xl mb-4 opacity-40'>{icon}</div>
+    <h3 className='text-xl font-bold text-gray-900 dark:text-white mb-2'>{title}</h3>
+    {description && <p className='text-gray-500 max-w-md mx-auto mb-6'>{description}</p>}
+    {action && <button onClick={action.onClick} className='px-6 py-2.5 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700'>{action.label}</button>}
+  </motion.div>
 );
 export default EmptyState;