From 566c844e1b52536ed182ed4fb5cd1df5a6ef24af Mon Sep 17 00:00:00 2001
From: Hasan Yahya <hasna786yahya@gmail.com>
Date: Tue, 4 Jun 2024 14:13:29 +0500
Subject: [PATCH] refactor: Update npm dependencies for image display
 improvements

---
 package-lock.json                       | 20 ++++++++++++++++
 package.json                            |  2 ++
 src/components/component/playground.jsx | 32 +++++++++++++++++++++++++
 src/components/ui/sonner.jsx            | 29 ++++++++++++++++++++++
 4 files changed, 83 insertions(+)
 create mode 100644 src/components/ui/sonner.jsx

diff --git a/package-lock.json b/package-lock.json
index d192e9d..4c14596 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,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"
@@ -4113,6 +4115,15 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -5059,6 +5070,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/sonner": {
+      "version": "1.4.41",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.4.41.tgz",
+      "integrity": "sha512-uG511ggnnsw6gcn/X+YKkWPo5ep9il9wYi3QJxHsYe7yTZ4+cOd1wuodOUmOpFuXL+/RE3R04LczdNCDygTDgQ==",
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
diff --git a/package.json b/package.json
index 5c7838f..b467a3f 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
index 5217a06..34f0ab7 100644
--- a/src/components/component/playground.jsx
+++ b/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">
diff --git a/src/components/ui/sonner.jsx b/src/components/ui/sonner.jsx
new file mode 100644
index 0000000..bd51a92
--- /dev/null
+++ b/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 }