diff options
Diffstat (limited to 'apps/web/components/ui')
| -rw-r--r-- | apps/web/components/ui/dialog.tsx | 16 | ||||
| -rw-r--r-- | apps/web/components/ui/tooltip.tsx | 36 |
2 files changed, 46 insertions, 6 deletions
diff --git a/apps/web/components/ui/dialog.tsx b/apps/web/components/ui/dialog.tsx index 8e0c3c6c..18795408 100644 --- a/apps/web/components/ui/dialog.tsx +++ b/apps/web/components/ui/dialog.tsx @@ -30,8 +30,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; const DialogContent = React.forwardRef< React.ElementRef<typeof DialogPrimitive.Content>, - React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> ->(({ className, children, ...props }, ref) => ( + React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { + hideCloseBtn?: boolean; + } +>(({ className, children, hideCloseBtn = false, ...props }, ref) => ( <DialogPortal> <DialogOverlay /> <DialogPrimitive.Content @@ -43,10 +45,12 @@ const DialogContent = React.forwardRef< {...props} > {children} - <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"> - <X className="size-4" /> - <span className="sr-only">Close</span> - </DialogPrimitive.Close> + {!hideCloseBtn && ( + <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"> + <X className="size-4" /> + <span className="sr-only">Close</span> + </DialogPrimitive.Close> + )} </DialogPrimitive.Content> </DialogPortal> )); diff --git a/apps/web/components/ui/tooltip.tsx b/apps/web/components/ui/tooltip.tsx new file mode 100644 index 00000000..020f6151 --- /dev/null +++ b/apps/web/components/ui/tooltip.tsx @@ -0,0 +1,36 @@ +"use client"; + +import * as React from "react"; +import { cn } from "@/lib/utils"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; + +const TooltipProvider = TooltipPrimitive.Provider; + +const Tooltip = TooltipPrimitive.Root; + +const TooltipTrigger = TooltipPrimitive.Trigger; +const TooltipPortal = TooltipPrimitive.Portal; + +const TooltipContent = React.forwardRef< + React.ElementRef<typeof TooltipPrimitive.Content>, + React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> +>(({ className, sideOffset = 4, ...props }, ref) => ( + <TooltipPrimitive.Content + ref={ref} + sideOffset={sideOffset} + className={cn( + "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground 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", + className, + )} + {...props} + /> +)); +TooltipContent.displayName = TooltipPrimitive.Content.displayName; + +export { + Tooltip, + TooltipTrigger, + TooltipContent, + TooltipProvider, + TooltipPortal, +}; |
