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;

components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

components/ui/toast.tsx

@@ -28,8 +28,11 @@ const toastVariants = cva(
     variants: {
       variant: {
         default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+        info: "bg-blue-500 opacity-90 text-white border-0",
+        success: "bg-green-500 opacity-90 text-white border-0",
+        warning: "bg-orange-500 opacity-90 text-white border-0",
+        error: "bg-red-500 opacity-90 text-white border-0",
       },
     },
     defaultVariants: {