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>