From d04963d066447c51d43cc1bfc5ba3565382ca0b9 Mon Sep 17 00:00:00 2001
From: Hasan Yahya <hasna786yahya@gmail.com>
Date: Tue, 23 Jul 2024 23:56:53 +0500
Subject: [PATCH] refactor: Update Playground component with lazy loading for
 images and Lucide React icon

---
 package-lock.json                       | 9 +++++++++
 package.json                            | 1 +
 src/components/component/playground.jsx | 5 +++--
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c176a0e..9eed829 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
+        "lucide-react": "^0.414.0",
         "next-themes": "^0.3.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -4642,6 +4643,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.414.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.414.0.tgz",
+      "integrity": "sha512-Krr/MHg9AWoJc52qx8hyJ64X9++JNfS1wjaJviLM1EP/68VNB7Tv0VMldLCB1aUe6Ka9QxURPhQm/eB6cqOM3A==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index 9b54c57..8551a81 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "lucide-react": "^0.414.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
index b2bb7b9..24daa86 100644
--- a/src/components/component/playground.jsx
+++ b/src/components/component/playground.jsx
@@ -9,6 +9,7 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { ArrowRightLeft } from "lucide-react";
 
 export function Playground() {
 
@@ -350,7 +351,7 @@ export function Playground() {
                                 </div>
                             </div>
                             <div className="grid gap-2">
-                                <div className="flex items-center gap-4">
+                                <div className="flex items-center gap-4 group">
                                     <TooltipProvider>
                                         <Tooltip>
                                             <TooltipTrigger>
@@ -364,7 +365,7 @@ export function Playground() {
                                     </TooltipProvider>
                                     <div className="flex-1 text-lg font-semibold text-gray-900 dark:text-gray-50">{rValue}, {gValue}, {bValue}</div>
                                 </div>
-                                <div className="flex items-center gap-4">
+                                <div className="flex items-center gap-4 group">
                                     <TooltipProvider>
                                         <Tooltip>
                                             <TooltipTrigger>