feat(Alert): danger sentiment

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>
   );