update

Frontend/src/shared/components/ErrorMessage.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { AlertCircle, X } from 'lucide-react';
+
+interface ErrorMessageProps {
+  message: string;
+  onDismiss?: () => void;
+  className?: string;
+  variant?: 'error' | 'warning' | 'info';
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({
+  message,
+  onDismiss,
+  className = '',
+  variant = 'error',
+}) => {
+  const variantStyles = {
+    error: 'bg-red-50 border-red-200 text-red-800',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+  };
+
+  const iconColors = {
+    error: 'text-red-600',
+    warning: 'text-yellow-600',
+    info: 'text-blue-600',
+  };
+
+  return (
+    <div
+      className={`flex items-start gap-3 p-4 rounded-lg border ${variantStyles[variant]} ${className}`}
+      role="alert"
+      aria-live="polite"
+    >
+      <AlertCircle className={`w-5 h-5 flex-shrink-0 mt-0.5 ${iconColors[variant]}`} />
+      <div className="flex-1">
+        <p className="text-sm font-medium">{message}</p>
+      </div>
+      {onDismiss && (
+        <button
+          onClick={onDismiss}
+          className="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors"
+          aria-label="Dismiss error"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ErrorMessage;
+