chore(capacitor): refactor codebase for capacitor entry

components/DestructibleAlert.tsx

@@ -1,18 +1,38 @@
 import React, { JSX } from "react";
 
 interface DestructibleAlertProps {
+  variant?: "error" | "warning" | "alert";
   text: string;
   icon?: JSX.Element;
 }
 
 const DestructibleAlert: React.FC<DestructibleAlertProps> = ({
+  variant,
   text,
   icon,
 }) => {
   return (
-    <div className=" bg-red-200 rounded-3xl py-6 flex flex-col items-center justify-center gap-2 w-full ">
+    <div
+      className={`${
+        variant === "error"
+          ? "bg-red-200"
+          : variant === "warning"
+          ? "bg-yellow-200"
+          : "bg-green-200"
+      } rounded-3xl py-6 flex flex-col items-center justify-center gap-2 w-full `}
+    >
       <div>{icon}</div>
-      <p className="text-lg font-bold text-center text-red-800">{text}</p>
+      <p
+        className={`text-lg font-bold text-center ${
+          variant === "error"
+            ? "text-red-800"
+            : variant === "warning"
+            ? "text-yellow-800"
+            : "text-green-800"
+        }`}
+      >
+        {text}
+      </p>
     </div>
   );
 };