refactor: Add tooltips for switching color formats in Playground comp…

…onent
HasanYahya101 · Jul 23, 2024 · a246ed1 · a246ed1
1 parent d04963d
commit a246ed1
Showing 1 changed file with 24 additions and 0 deletions.
diff --git 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>