diff options
Diffstat (limited to 'apps/web/src/components/ui/tooltip.tsx')
| -rw-r--r-- | apps/web/src/components/ui/tooltip.tsx | 111 |
1 files changed, 57 insertions, 54 deletions
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx index bfb75e2e..769ac360 100644 --- a/apps/web/src/components/ui/tooltip.tsx +++ b/apps/web/src/components/ui/tooltip.tsx @@ -1,8 +1,8 @@ -import { cva, type VariantProps } from 'class-variance-authority'; -import { Tooltip as TooltipPrimitive } from 'radix-ui'; -import * as React from 'react'; +import { cva, type VariantProps } from "class-variance-authority"; +import { Tooltip as TooltipPrimitive } from "radix-ui"; +import * as React from "react"; -import { cn } from '@/lib/utils'; +import { cn } from "@/utils/ui"; const TooltipProvider = TooltipPrimitive.Provider; @@ -11,62 +11,65 @@ 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', - }, - }, + "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> {} + extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, + VariantProps<typeof tooltipVariants> {} const TooltipContent = React.forwardRef< - React.ElementRef<typeof TooltipPrimitive.Content>, - TooltipContentProps + React.ElementRef<typeof TooltipPrimitive.Content>, + TooltipContentProps >(({ className, sideOffset = 4, variant, ...props }, ref) => ( - <TooltipPrimitive.Content - ref={ref} - sideOffset={sideOffset} - className={cn(tooltipVariants({ variant }), className)} - {...props} - > - {variant === 'sidebar' && ( - <svg - width="6" - height="10" - 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> + <TooltipPrimitive.Content + ref={ref} + sideOffset={sideOffset} + className={cn(tooltipVariants({ variant }), className)} + {...props} + > + {variant === "sidebar" && ( + <svg + width="6" + height="10" + viewBox="0 0 6 10" + fill="none" + xmlns="http://www.w3.org/2000/svg" + className="absolute top-1/2 left-[-6px] -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 };
\ No newline at end of file +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |