add shadcn-ui/sonner for toast

nayak-nirmalya · Apr 21, 2024 · 5805732 · 5805732
1 parent 5be212b
commit 5805732
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -20,8 +20,10 @@
     "drizzle-orm": "^0.30.8",
     "lucide-react": "^0.371.0",
     "next": "14.2.2",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "sonner": "^1.4.41",
     "svix": "^1.21.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -5,31 +5,16 @@ import {
   SignInButton,
   UserButton,
 } from "@clerk/nextjs";
-import { currentUser } from "@clerk/nextjs";
-import { toast } from "sonner";
 
 import { runTask } from "@/actions/aws";
 
 export default async function DashboardPage() {
-  const user = await currentUser();
-  const [isPending, startTransition] = useTransition();
-
-  const runTaskButton = () => {
-    startTransition(() => {
-      runTask()
-        .then(() => {
-          toast.success("Connection generated");
-        })
-        .catch(() => toast.error("Connection generation failed"));
-    });
-  };
-
   return (
     <div>
       <h1>DashboardPage (Protected)</h1>
       <SignedIn>
         <UserButton afterSignOutUrl="/" />
-        <button className="text-4xl font-bold" onClick={runTaskButton}>
+        <button className="text-4xl font-bold" onClick={runTask}>
           Run Task
         </button>
       </SignedIn>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ClerkProvider } from "@clerk/nextjs";
+import { Toaster } from "@/components/ui/sonner";
 
 import "./globals.css";
 
@@ -19,7 +20,10 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <html lang="en">
-        <body className={inter.className}>{children}</body>
+        <body className={inter.className}>
+          {children}
+          <Toaster />
+        </body>
       </html>
     </ClerkProvider>
   );

diff --git a/src/components/ui/sonner.tsx b/src/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 }