added sonner for errors

package.json

@@ -38,10 +38,12 @@
     "clsx": "^2.1.1",
     "file-saver": "^2.0.5",
     "lucide-react": "^0.414.0",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "save-as": "^0.1.8",
+    "sonner": "^1.5.0",
     "sql.js": "^1.10.3",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",

src/components/dropzone-helpers.tsx

@@ -1,7 +1,7 @@
 import type { FileError } from "react-dropzone";
 import { bytesToValue } from "@/lib/file";
 
-import { FileWarning, FileCheck } from "lucide-react";
+import { toast } from "sonner";
 
 export function FileData({ file }: { file: File }) {
   return (
@@ -16,22 +16,12 @@ export function FileData({ file }: { file: File }) {
 }
 
 export function FileStats({ errors }: { errors?: FileError[] }) {
-  return errors ? (
+  errors && (
     <>
-      {errors.map((error) => (
-        <div
-          className="flex items-center justify-center text-sm text-red-600 gap-2 rounded border border-red-600 p-4 mb-2"
-          key={error.code}
-        >
-          <FileWarning />
-          {error.message}
-        </div>
-      ))}
+      {errors.map((error) =>
+        toast(error.message, { position: "bottom-right" }),
+      )}
     </>
-  ) : (
-    <li className="flex w-full items-center justify-center text-sm text-green-600">
-      <FileCheck className="mr-2" />
-      Uploaded successfully
-    </li>
   );
+  return <></>;
 }

src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+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-primary group-[.toaster]:text-background 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 };

src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 
 import App from "./App.tsx";
+import { Toaster } from "@/components/ui/sonner";
 
 import "./index.css";
 
@@ -10,5 +11,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <main className="container mx-auto p-4 h-screen flex flex-col gap-3">
       <App />
     </main>
+    <Toaster />
   </React.StrictMode>,
 );