refactor: Update import statements for Toaster component in RootLayou…

…t and CopyToClipboard component
emapeire · May 15, 2024 · e40a970 · e40a970
1 parent 9c0ca32
commit e40a970
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,7 +8,7 @@ import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
 import { ThemeProvider } from '@/components/theme-provider'
 import { TooltipProvider } from '@/components/ui/tooltip'
-import { Toaster } from 'sonner'
+import { Toaster } from '@/components/ui/sonner'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import { cn } from '@/lib/utils'
@@ -44,13 +44,13 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             <TooltipProvider>
-              <Toaster />
               <main className='flex flex-col items-center justify-center min-h-screen pt-24 pb-8 px-4'>
                 <Header />
                 {children}
                 <Footer />
               </main>
             </TooltipProvider>
+            <Toaster />
           </ThemeProvider>
           <Analytics />
           <SpeedInsights />

diff --git a/src/components/copy-to-clipboard.tsx b/src/components/copy-to-clipboard.tsx
@@ -32,10 +32,10 @@ export function CopyToClipboard({ url }: { url: ContactProps['value'] }) {
         <Button
           type='submit'
           size='icon'
+          aria-label='Copy'
           onClick={copyToClipboard}
           disabled={copied}
         >
-          <span className='sr-only'>Copy</span>
           <CopyIcon
             className={clsx('size-4', {
               block: !copied,
@@ -50,9 +50,7 @@ export function CopyToClipboard({ url }: { url: ContactProps['value'] }) {
           />
         </Button>
       </TooltipTrigger>
-      <TooltipContent>
-        <p>Copy</p>
-      </TooltipContent>
+      <TooltipContent>Copy</TooltipContent>
     </Tooltip>
   )
 }
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 }