From 245c2f483c36e197da4e8ff2a2fe1d58e2916786 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 14:16:24 +0200
Subject: [PATCH] feat: Add ErrorDisplay component

---
 apps/nextjs/src/components/utils.tsx | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 apps/nextjs/src/components/utils.tsx

diff --git a/apps/nextjs/src/components/utils.tsx b/apps/nextjs/src/components/utils.tsx
new file mode 100644
index 000000000..1262ec877
--- /dev/null
+++ b/apps/nextjs/src/components/utils.tsx
@@ -0,0 +1,33 @@
+import type { AlertProps } from "@mantine/core";
+import { Alert } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+interface ErrorDisplayProps extends AlertProps {
+  title?: string;
+  hidden?: boolean;
+  message?: string;
+  icon?: React.ReactNode;
+}
+
+export function ErrorDisplay({
+  title = "There was an error",
+  message,
+  icon,
+  hidden = false,
+  ...alertProps
+}: ErrorDisplayProps) {
+  if (hidden) {
+    return null;
+  }
+  return (
+    <Alert
+      variant="filled"
+      color="red"
+      title={title}
+      icon={icon ? icon : <IconAlertTriangle />}
+      {...alertProps}
+    >
+      {message}
+    </Alert>
+  );
+}