feat(ui): add icons to destructible alert

components/DestructibleAlert.tsx

@@ -1,38 +1,18 @@
-import React from "react";
+import React, { JSX } from "react";
 
 interface DestructibleAlertProps {
   text: string;
-  extraStyles?: string;
+  icon: JSX.Element;
 }
 
-const DestructibleAlert = ({
+const DestructibleAlert: React.FC<DestructibleAlertProps> = ({
   text,
-  extraStyles = "",
-}: DestructibleAlertProps) => {
+  icon,
+}) => {
   return (
-    <div
-      className={`border bg-red-200 border-blue-200 rounded-3xl py-6 ${extraStyles}`}
-      style={{
-        borderWidth: 1,
-        backgroundColor: "#fecaca",
-        borderColor: "#c0dafc",
-        paddingTop: 24,
-        paddingBottom: 24,
-      }}
-    >
-      <p
-        className="text-center text-red-800"
-        style={{
-          fontSize: 17,
-          lineHeight: "28px",
-          fontFamily: "Montserrat, sans-serif",
-          fontWeight: "bold",
-          textAlign: "center",
-          color: "#991b1b",
-        }}
-      >
-        {text}
-      </p>
+    <div className=" bg-red-200 rounded-3xl py-6 flex flex-col items-center justify-center gap-2 ">
+      <div>{icon}</div>
+      <p className="text-lg font-bold text-center text-red-800">{text}</p>
     </div>
   );
 };