`components/EmptyState.tsx`

30 lines
interface EmptyStateProps {
  icon: string
  title: string
  message: string
  action?: {
    label: string
    onClick: () => void
  }
}

export default function EmptyState({ icon, title, message, action }: EmptyStateProps) {
  return (
    <div className="text-center py-16 px-4 animate-scale-in">
      <div className="max-w-md mx-auto">
        <div className="text-7xl mb-6 animate-bounce-subtle">{icon}</div>
        <h3 className="text-2xl font-bold text-gray-900 mb-3">{title}</h3>
        <p className="text-gray-600 mb-8 text-lg">{message}</p>
        {action && (
          <button
            onClick={action.onClick}
            className="px-8 py-3 bg-gradient-to-r from-wine-600 to-burgundy-600 text-white font-semibold rounded-full hover:from-wine-700 hover:to-burgundy-700 transition-all duration-300 hover:shadow-wine-lg transform hover:scale-105 min-h-[44px]"
          >
            {action.label}
          </button>
        )}
      </div>
    </div>
  )
}