feat: add tooltip in TabBar (#515)

apps/web/src/components/editor/media-panel/tabbar.tsx

@@ -2,6 +2,12 @@
 
 import { cn } from "@/lib/utils";
 import { Tab, tabs, useMediaPanelStore } from "./store";
+import { Button } from "@/components/ui/button";
+import { ChevronRight, ChevronLeft } from "lucide-react";
+import { useRef, useState, useEffect } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+
 
 export function TabBar() {
   const { activeTab, setActiveTab } = useMediaPanelStore();
@@ -14,15 +20,20 @@ export function TabBar() {
           return (
             <div
               className={cn(
-                "flex flex-col gap-0.5 items-center cursor-pointer opacity-100 hover:opacity-75",
+                "flex z-[100] flex-col gap-0.5 items-center cursor-pointer",
-                activeTab === tabKey
+                activeTab === tabKey ? "text-primary !opacity-100" : "text-muted-foreground"
-                  ? "text-primary !opacity-100"
-                  : "text-muted-foreground"
               )}
               onClick={() => setActiveTab(tabKey)}
               key={tabKey}
             >
-              <tab.icon className="size-[1.1rem]!" />
+              <Tooltip delayDuration={10}>
+                <TooltipTrigger asChild>
+                  <tab.icon className="size-[1.1rem]! opacity-100 hover:opacity-75" />
+                </TooltipTrigger>
+                <TooltipContent side="right" align="center" variant="sidebar" sideOffset={8}>
+                  <div className="dark:text-base-gray-950 text-black text-sm font-medium leading-none dark:text-white">{tab.label}</div>
+                </TooltipContent>
+              </Tooltip>
             </div>
           );
         })}

apps/web/src/components/ui/tooltip.tsx

@@ -1,9 +1,8 @@
-"use client";
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import * as React from 'react';
 
-import * as React from "react";
+import { cn } from '@/lib/utils';
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-
-import { cn } from "../../lib/utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -11,22 +10,63 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const tooltipVariants = cva(
+  'z-50 overflow-visible rounded-sm text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-popover text-popover-foreground border px-3 py-1.5',
+        destructive:
+          'bg-destructive/10 text-destructive dark:bg-destructive/20 border-destructive [border-width:0.5px]',
+        outline: 'border-border',
+        important:
+          'bg-amber-100/90 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300 border-amber-900 [border-width:0.5px]',
+        promotions:
+          'bg-red-100/90 text-red-900 dark:bg-red-900/20 dark:text-red-300 border-red-900 [border-width:0.5px]',
+        personal:
+          'bg-green-100/90 text-green-900 dark:bg-green-900/20 dark:text-green-300 border-green-900 [border-width:0.5px]',
+        updates:
+          'bg-purple-100/90 text-purple-900 dark:bg-purple-900/20 dark:text-purple-300 border-purple-900 [border-width:0.5px]',
+        forums:
+          'bg-blue-100/90 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300 border-blue-900 [border-width:0.5px]',
+        sidebar: 'bg-white dark:bg-[#413F3E] p-2.5 flex flex-col gap-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+    VariantProps<typeof tooltipVariants> {}
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+  TooltipContentProps
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, variant, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
+  <TooltipPrimitive.Content
-    <TooltipPrimitive.Content
+    ref={ref}
-      ref={ref}
+    sideOffset={sideOffset}
-      sideOffset={sideOffset}
+    className={cn(tooltipVariants({ variant }), className)}
-      className={cn(
+    {...props}
-        "z-50 overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  >
-        className
+    {variant === 'sidebar' && (
-      )}
+      <svg
-      {...props}
+        width="6"
-    />
+        height="10"
-  </TooltipPrimitive.Portal>
+        viewBox="0 0 6 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute left-[-6px] top-1/2 -translate-y-1/2"
+      >
+        <path d="M6 0L0 5L6 10V0Z" className="fill-white/80 dark:fill-[#413F3E]" />
+      </svg>
+    )}
+    {props.children}
+  </TooltipPrimitive.Content>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };