Added some error message handling and added basic info about functionality on ui

components/elements/error-notice.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { FaExclamationTriangle } from "react-icons/fa";
+import { Button } from "../ui/button";
+import { X } from "lucide-react";
+
+
+interface NoticeProps {
+  message: string
+  hidden?: boolean
+}
+
+const ErrorNotice = ({
+  message,
+  hidden = false
+} : NoticeProps ) => {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <div className={"flex flex-col bg-red-400 rounded-lg px-4 py-2 mx-6" + (hidden || !open ? " hidden" : "")}>
+      <div className="ml-[10px] items-center align-middle text-start w-full flex flex-row justify-between">
+        <div>
+          <FaExclamationTriangle className="w-3 h-3 inline-block" />
+          <div className="ml-2 inline-block text-md align-middle font-bold">Info</div>
+        </div>
+        <Button variant="ghost" onClick={() => setOpen(false)} className="hover:bg-red-800 rounded-lg">
+          <X className="align-top items-end" />
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm flex flex-grow w-full">{message}</p>
+      </div>
+    </div>
+  );
+}
+ 
+export default ErrorNotice;

components/elements/info-notice.tsx

@@ -0,0 +1,35 @@
+import { Info, X } from "lucide-react";
+import React, { useState } from "react";
+import { Button } from "../ui/button";
+
+
+interface NoticeProps {
+  message: string
+  hidden?: boolean
+}
+
+const InfoNotice = ({
+  message,
+  hidden = false
+} : NoticeProps ) => {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <div className={"flex flex-col bg-blue-400 rounded-lg px-4 py-2 mx-6" + (hidden || !open ? " hidden" : "")}>
+      <div className="ml-[10px] items-center align-middle text-start w-full flex flex-row justify-between">
+        <div>
+          <Info className="w-3 h-3 inline-block" />
+          <div className="ml-2 inline-block text-md align-middle font-bold">Info</div>
+        </div>
+        <Button variant="ghost" onClick={() => setOpen(false)} className="hover:bg-red-800 rounded-lg">
+          <X className="align-top items-end" />
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm flex flex-grow w-full">{message}</p>
+      </div>
+    </div>
+  );
+}
+ 
+export default InfoNotice;

components/elements/warning-notice.tsx

@@ -0,0 +1,36 @@
+import { X } from "lucide-react";
+import React, { useState } from "react";
+import { FaExclamationCircle } from "react-icons/fa";
+import { Button } from "../ui/button";
+
+
+interface NoticeProps {
+  message: string
+  hidden?: boolean
+}
+
+const WarningNotice = ({
+  message,
+  hidden = false
+} : NoticeProps ) => {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <div className={"flex flex-col bg-orange-400 rounded-lg px-4 py-2 mx-6" + (hidden || !open ? " hidden" : "")}>
+      <div className="ml-[10px] items-center align-middle text-start w-full flex flex-row justify-between">
+        <div>
+          <FaExclamationCircle className="w-3 h-3 inline-block" />
+          <div className="ml-2 inline-block text-md align-middle font-bold">Info</div>
+        </div>
+        <Button variant="ghost" onClick={() => setOpen(false)} className="hover:bg-red-800 rounded-lg">
+          <X className="align-top items-end" />
+        </Button>
+      </div>
+      <div>
+        <p className="text-sm flex flex-grow w-full">{message}</p>
+      </div>
+    </div>
+  );
+}
+ 
+export default WarningNotice;