Spaces:
Running
Running
File size: 1,121 Bytes
fb12607 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | "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>
);
}
|