From 50f5efb462d9a28654ceb15dffc0f2be86882e5e Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Thu, 22 May 2025 10:41:01 +0200
Subject: [PATCH] feat: add feedback-banner component

---
 .../ui/feedback-banner/feedback-banner.tsx    | 66 +++++++++++++++++++
 ui/components/ui/index.ts                     |  1 +
 2 files changed, 67 insertions(+)
 create mode 100644 ui/components/ui/feedback-banner/feedback-banner.tsx

diff --git a/ui/components/ui/feedback-banner/feedback-banner.tsx b/ui/components/ui/feedback-banner/feedback-banner.tsx
new file mode 100644
index 0000000000..806761e5ed
--- /dev/null
+++ b/ui/components/ui/feedback-banner/feedback-banner.tsx
@@ -0,0 +1,66 @@
+import { AlertIcon } from "@/components/icons/Icons";
+import { cn } from "@/lib/utils";
+
+type FeedbackType = "error" | "warning" | "info" | "success";
+
+interface FeedbackBannerProps {
+  type?: FeedbackType;
+  title: string;
+  message: string;
+  className?: string;
+}
+
+const typeStyles: Record<
+  FeedbackType,
+  { border: string; bg: string; text: string }
+> = {
+  error: {
+    border: "border-danger",
+    bg: "bg-system-error-light/30 dark:bg-system-error-light/80",
+    text: "text-danger",
+  },
+  warning: {
+    border: "border-warning",
+    bg: "bg-yellow-100 dark:bg-yellow-200",
+    text: "text-yellow-800",
+  },
+  info: {
+    border: "border-blue-400",
+    bg: "bg-blue-50 dark:bg-blue-100",
+    text: "text-blue-800",
+  },
+  success: {
+    border: "border-green-500",
+    bg: "bg-green-50 dark:bg-green-100",
+    text: "text-green-800",
+  },
+};
+
+export const FeedbackBanner: React.FC<FeedbackBannerProps> = ({
+  type = "info",
+  title,
+  message,
+  className,
+}) => {
+  const styles = typeStyles[type];
+
+  return (
+    <div
+      className={cn(
+        "rounded-xl border-l-4 p-4 shadow-sm",
+        styles.border,
+        styles.bg,
+        className,
+      )}
+    >
+      <div className="flex items-center gap-3">
+        <span className={cn("mt-1", styles.text)}>
+          <AlertIcon size={20} />
+        </span>
+        <p className={cn("text-sm", styles.text)}>
+          <strong>{title}</strong> {message}
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/ui/components/ui/index.ts b/ui/components/ui/index.ts
index 6fb4555d80..fb81c25dc1 100644
--- a/ui/components/ui/index.ts
+++ b/ui/components/ui/index.ts
@@ -7,6 +7,7 @@ export * from "./content-layout/content-layout";
 export * from "./dialog/dialog";
 export * from "./download-icon-button/download-icon-button";
 export * from "./dropdown/Dropdown";
+export * from "./feedback-banner/feedback-banner";
 export * from "./headers/navigation-header";
 export * from "./label/Label";
 export * from "./main-layout/main-layout";