From 45c4ed5a589656f5aeff00c318f140e4d931de11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20Poduszl=C3=B3?=
 <14854048+kripod@users.noreply.github.com>
Date: Mon, 11 Dec 2023 22:18:41 +0100
Subject: [PATCH] feat(Alert): danger sentiment

---
 src/components/Alert.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index 373cd94..76576fa 100644
--- a/src/components/Alert.tsx
+++ b/src/components/Alert.tsx
@@ -1,16 +1,33 @@
-import { InformationCircleIcon } from "@heroicons/react/24/solid";
+import {
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from "@heroicons/react/24/solid";
+import { clsx } from "clsx";
 
 export interface AlertProps {
+  sentiment?: "neutral" | "danger";
   children?: React.ReactNode;
 }
 
-export function Alert({ children }: AlertProps) {
+const iconBySentiment = {
+  neutral: InformationCircleIcon,
+  danger: ExclamationTriangleIcon,
+} satisfies Record<NonNullable<AlertProps["sentiment"]>, React.ComponentType>;
+
+export function Alert({ sentiment = "neutral", children }: AlertProps) {
+  const Icon = iconBySentiment[sentiment];
+
   return (
     <div
       role="alert"
-      className="flex gap-x-2 rounded-2xl border border-ui-neutral-2 bg-ui-neutral-1 p-4 text-base text-ui-neutral-5"
+      className={clsx("flex gap-x-2 rounded-2xl border p-4 text-base", {
+        "border-ui-neutral-2 bg-ui-neutral-1 text-ui-neutral-5":
+          sentiment === "neutral",
+        "border-ui-danger-2 bg-ui-danger-1 text-ui-danger-5":
+          sentiment === "danger",
+      })}
     >
-      <InformationCircleIcon className="h-6 w-6 flex-none" />
+      <Icon className="h-6 w-6 flex-none" />
       <div>{children}</div>
     </div>
   );