Spaces:
Running
Running
| "use client"; | |
| import React from "react"; | |
| import { AlertCircle } from "lucide-react"; | |
| export interface ErrorMessageProps { | |
| message?: string | null; | |
| className?: string; | |
| style?: React.CSSProperties; | |
| /** Whether to show the danger indicator icon */ | |
| showIcon?: boolean; | |
| } | |
| /** | |
| * EasyUI-inspired Form Error Message. | |
| * Displays input validation errors with subtle shake and danger tone. | |
| */ | |
| export function ErrorMessage({ | |
| message, | |
| className = "", | |
| style, | |
| showIcon = true, | |
| }: ErrorMessageProps) { | |
| if (!message) return null; | |
| return ( | |
| <div | |
| role="alert" | |
| className={`form-error-message ${className}`} | |
| style={{ | |
| display: "inline-flex", | |
| alignItems: "center", | |
| gap: 5, | |
| marginTop: "var(--space-1, 0.25rem)", | |
| fontSize: "var(--text-xs, 0.75rem)", | |
| color: "var(--color-error, #EF4444)", | |
| fontWeight: 500, | |
| animation: "easyui-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both", | |
| ...style, | |
| }} | |
| > | |
| {showIcon && <AlertCircle size={13} style={{ flexShrink: 0 }} />} | |
| <span>{message}</span> | |
| </div> | |
| ); | |
| } | |