refactor: Update npm dependencies for image display improvements

package.json

@@ -14,9 +14,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
+    "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.1"

src/components/component/playground.jsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button"
 import { useEffect, useState } from "react";
 import Upload from "./upload";
 import { Slider } from "@/components/ui/slider";
+import { Toaster, toast } from "sonner";
 
 export function Playground() {
 
@@ -106,6 +107,15 @@ export function Playground() {
         setDefaultHue(hsl.h);
         setDefaultSaturation(hsl.s);
         setDefaultBrightness(hsl.l);
+
+        toast.success("Color picked from image",
+            {
+                action: {
+                    label: "Close",
+                    onClick: () => toast.dismiss(),
+                }
+            }
+        );
     };
 
     const hexToRgb = (hex) => {
@@ -154,14 +164,35 @@ export function Playground() {
 
     function CopyRGB() {
         navigator.clipboard.writeText(`${rValue}, ${gValue}, ${bValue}`);
+        toast.success("Copied RGB value to clipboard",
+            {
+                action: {
+                    label: "Close",
+                    onClick: () => toast.dismiss(),
+                }
+            });
     }
 
     function CopyHEX() {
         navigator.clipboard.writeText(hexValue);
+        toast.success("Copied HEX value to clipboard",
+            {
+                action: {
+                    label: "Close",
+                    onClick: () => toast.dismiss(),
+                }
+            });
     }
 
     function CopyHSL() {
         navigator.clipboard.writeText(`${defaultHue}°, ${defaultSaturation}%, ${defaultBrightness}%`);
+        toast.success("Copied HSL value to clipboard",
+            {
+                action: {
+                    label: "Close",
+                    onClick: () => toast.dismiss(),
+                }
+            });
     }
 
     if (!imageUploaded) {
@@ -174,6 +205,7 @@ export function Playground() {
         return (
             <div
                 className="flex flex-col items-center justify-center p-4 h-screen bg-gray-100 dark:bg-gray-950 ">
+                <Toaster />
                 <div
                     className="max-w-3xl w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
                     <div className="grid grid-cols-2 gap-6 p-6">

src/components/ui/sonner.jsx

@@ -0,0 +1,29 @@
+"use client";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    (<Sonner
+      theme={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 }