first

src/components/ui/error-message.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+
+interface ErrorMessageProps {
+  message: string | null;
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * A reusable error message component
+ * Renders nothing if message is null or empty
+ */
+export function ErrorMessage({ message, className = "", children }: ErrorMessageProps) {
+  if (!message) return null;
+  
+  return (
+    <div className={`mt-4 rounded-md bg-red-50 p-3 text-red-500 ${className}`}>
+      <p>{message}</p>
+      {children}
+    </div>
+  );
+}