refactor: move sonner component into providers directly

tszhong0411 · Feb 6, 2025 · 5fb90ff · 5fb90ff
1 parent 1d46be7
commit 5fb90ff
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 50 deletions.
diff --git a/apps/docs/src/app/providers.tsx b/apps/docs/src/app/providers.tsx
@@ -1,15 +1,15 @@
 'use client'
 
-import { ThemeProvider } from 'next-themes'
-
-import Sonner from '@/components/sonner'
+import { Toaster, type ToasterProps } from '@tszhong0411/ui'
+import { ThemeProvider, useTheme } from 'next-themes'
 
 type ProvidesProps = {
   children: React.ReactNode
 }
 
 const Providers = (props: ProvidesProps) => {
   const { children } = props
+  const { theme } = useTheme()
 
   return (
     <ThemeProvider
@@ -20,7 +20,14 @@ const Providers = (props: ProvidesProps) => {
       disableTransitionOnChange
     >
       {children}
-      <Sonner />
+      <Toaster
+        toastOptions={{
+          duration: 2500
+        }}
+        visibleToasts={5}
+        theme={theme as ToasterProps['theme']}
+        expand
+      />
     </ThemeProvider>
   )
 }

diff --git a/apps/docs/src/components/sonner.tsx b/apps/docs/src/components/sonner.tsx
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
@@ -1,11 +1,10 @@
 'use client'
 
-import { TooltipProvider } from '@tszhong0411/ui'
+import { Toaster, type ToasterProps, TooltipProvider } from '@tszhong0411/ui'
 import { SessionProvider } from 'next-auth/react'
-import { ThemeProvider } from 'next-themes'
+import { ThemeProvider, useTheme } from 'next-themes'
 import { Suspense } from 'react'
 
-import Sonner from '@/components/sonner'
 import { TRPCReactProvider } from '@/trpc/react'
 
 import Debug from './debug'
@@ -16,6 +15,7 @@ type ProvidesProps = {
 
 const Providers = (props: ProvidesProps) => {
   const { children } = props
+  const { theme } = useTheme()
 
   return (
     <TRPCReactProvider>
@@ -29,7 +29,14 @@ const Providers = (props: ProvidesProps) => {
         <SessionProvider>
           <TooltipProvider>
             {children}
-            <Sonner />
+            <Toaster
+              toastOptions={{
+                duration: 2500
+              }}
+              visibleToasts={5}
+              theme={theme as ToasterProps['theme']}
+              expand
+            />
             <Suspense>
               <Debug />
             </Suspense>

diff --git a/apps/web/src/components/sonner.tsx b/apps/web/src/components/sonner.tsx