feat(ui): add icons to destructible alert

app/(tabs)/bookmark/page.tsx

@@ -2,8 +2,16 @@
 
 import React, { useState, useEffect } from "react";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
-import { Bookmark, BookmarkCheck, ListFilter, MoveLeft } from "lucide-react";
+import {
+  Bookmark,
+  BookmarkCheck,
+  Check,
+  ListFilter,
+  MoveLeft,
+  OctagonX,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
+import DestructibleAlert from "@/components/DestructibleAlert";
 
 interface Question {
   id: number;

app/exam/pretest/page.tsx

@@ -2,7 +2,7 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
-import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
+import { ArrowLeft, HelpCircle, Clock, XCircle, OctagonX } from "lucide-react";
 import DestructibleAlert from "@/components/DestructibleAlert";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
 import { API_URL, getToken } from "@/lib/auth";
@@ -88,7 +88,12 @@ function PretestPageContent() {
             >
               <ArrowLeft size={30} color="black" />
             </button>
-            <DestructibleAlert text={error} extraStyles="" />
+            <div className="">
+              <DestructibleAlert
+                text={error}
+                icon={<OctagonX size={150} color="red" />}
+              />
+            </div>
           </div>
         </div>
       </BackgroundWrapper>

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 = "",
+  icon,
-}: DestructibleAlertProps) => {
+}) => {
   return (
-    <div
+    <div className=" bg-red-200 rounded-3xl py-6 flex flex-col items-center justify-center gap-2 ">
-      className={`border bg-red-200 border-blue-200 rounded-3xl py-6 ${extraStyles}`}
+      <div>{icon}</div>
-      style={{
+      <p className="text-lg font-bold text-center text-red-800">{text}</p>
-        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>
   );
 };