From a246ed178f5b35e3eac5ea180d648feff050fafa Mon Sep 17 00:00:00 2001
From: Hasan Yahya <hasna786yahya@gmail.com>
Date: Wed, 24 Jul 2024 00:11:52 +0500
Subject: [PATCH] refactor: Add tooltips for switching color formats in
 Playground component

---
 src/components/component/playground.jsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
index 24daa86..50169b9 100644
--- a/src/components/component/playground.jsx
+++ b/src/components/component/playground.jsx
@@ -364,6 +364,18 @@ export function Playground() {
                                         </Tooltip>
                                     </TooltipProvider>
                                     <div className="flex-1 text-lg font-semibold text-gray-900 dark:text-gray-50">{rValue}, {gValue}, {bValue}</div>
+                                    <TooltipProvider>
+                                        <Tooltip>
+                                            <TooltipTrigger>
+                                                <Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-100 group-hover:opacity-100">
+                                                    <ArrowRightLeft className="w-4 h-4" />
+                                                </Button>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                <span className="text-sm text-muted-foreground">Switch to RGB</span>
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
                                 </div>
                                 <div className="flex items-center gap-4 group">
                                     <TooltipProvider>
@@ -378,6 +390,18 @@ export function Playground() {
                                         </Tooltip>
                                     </TooltipProvider>
                                     <div className="flex-1 text-lg font-semibold text-gray-900 dark:text-gray-50">{defaultHue}°, {defaultSaturation}%, {defaultBrightness}%</div>
+                                    <TooltipProvider>
+                                        <Tooltip>
+                                            <TooltipTrigger>
+                                                <Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-100 group-hover:opacity-100">
+                                                    <ArrowRightLeft className="w-4 h-4" />
+                                                </Button>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                <span className="text-sm text-muted-foreground">Switch to HSL</span>
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
                                 </div>
                             </div>
                         </div>