fahimahammed
diff --git a/‎src/app/layout.tsx‎
Lines changed: 9 additions & 5 deletions b/‎src/app/layout.tsx‎
Lines changed: 9 additions & 5 deletions
diff --git a/‎src/data/components.tsx‎
Lines changed: 60 additions & 11 deletions b/‎src/data/components.tsx‎
Lines changed: 60 additions & 11 deletions
@@ -1,10 +1,11 @@
 // src/app/layout.tsx
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import BackToTopButton from '@/components/ui/BackToTopButton';
+import BackToTopButton from "@/components/ui/BackToTopButton";
 import "./globals.css";
 import ThemeColorPicker from "@/components/ui/ThemeColorPicker";
-import { ThemeProvider } from "next-themes";   // ⬅️ import
+import { ThemeProvider } from "next-themes"; // ⬅️ import
+import { Toaster } from "@/components/ui/sonner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,12 +29,15 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning> 
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
         {/* ✅ Wrap everything in ThemeProvider */}
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-          <ThemeColorPicker />  
+          <ThemeColorPicker />
           {children}
+          <Toaster position="top-center" richColors />
           <BackToTopButton />
         </ThemeProvider>
       </body>
 
@@ -60,20 +60,10 @@ import {
   DrawerTrigger,
 } from "@/components/ui/drawer";
 import { FileUpload } from "@/components/ui/file-upload";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { FloatingActionButton } from "@/components/ui/floating-action-button";
-import { PlusIcon, HeartIcon, MessageCircleIcon } from "lucide-react";
 // REMOVED: import React, { useState } from "react";
 // ADDED: Import the component that now correctly encapsulates useState:
 import { SliderDemo } from "@/components/ui/sliderDemo";
 
-
-
 export const componentsData = [
   {
     id: "button",
@@ -956,7 +946,8 @@ export function DrawerDemo() {
   {
     id: "file-upload",
     title: "File Upload",
-    description: "A versatile file upload component with drag & drop, progress tracking, and multiple variants.",
+    description:
+      "A versatile file upload component with drag & drop, progress tracking, and multiple variants.",
     category: "Form",
     preview: (
       <div className="w-full max-w-md space-y-4">
@@ -1027,6 +1018,64 @@ export function FileUploadDemo() {
       </FileUpload>
     </div>
   )
+}`,
+  },
+  {
+    id: "sonner",
+    title: "Sonner",
+    description:
+      "A toast notification system for displaying brief messages to users.",
+    category: "Feedback",
+    preview: (
+      <div className="flex justify-center gap-4">
+        <Button
+          onClick={() => {
+            toast("Hi there, I am Sonner! 👋");
+          }}
+        >
+          Show Toast
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            toast.success("Success message!");
+          }}
+        >
+          Success
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={() => {
+            toast.error("Something went wrong");
+          }}
+        >
+          Error
+        </Button>
+      </div>
+    ),
+    code: `import { toast } from "sonner"
+import { Button } from "@/components/ui/button"
+
+export function SonnerDemo() {
+  return (
+    <div className="flex gap-4">
+      <Button onClick={() => toast("Simple notification")}>
+        Show Toast
+      </Button>
+      <Button
+        variant="secondary"
+        onClick={() => toast.success("Success message!")}
+      >
+        Success
+      </Button>
+      <Button
+        variant="destructive"
+        onClick={() => toast.error("Something went wrong")}
+      >
+        Error
+      </Button>
+    </div>
+  )
 }`,
   },
 ];