refactor: Update Playground component with lazy loading for images an…

…d Lucide React icon
HasanYahya101 · Jul 23, 2024 · d04963d · d04963d
1 parent 58c3da0
commit d04963d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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>