Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.3 kB · 98 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899"use client";
import { Popover as PopoverPrimitive } from "@base-ui/react/popover";import * as React from "react";import { cn } from "../../lib/utils";
const HoverCardContext = React.createContext({ openOnHover: true, openDelay: 500, closeDelay: 200,});
function HoverCard({ children, openDelay = 500, closeDelay = 200, trigger = "hover",}: { children: React.ReactNode; openDelay?: number; closeDelay?: number; trigger?: "hover" | "click";}) { return ( <HoverCardContext.Provider value={{ openOnHover: trigger === "hover", openDelay, closeDelay }} > <PopoverPrimitive.Root>{children}</PopoverPrimitive.Root> </HoverCardContext.Provider> );}
function HoverCardTrigger({ children, className, ...props}: React.ComponentProps<"span">) { const { openOnHover, openDelay, closeDelay } = React.useContext(HoverCardContext);
return ( <PopoverPrimitive.Trigger nativeButton={false} openOnHover={openOnHover} delay={openDelay} closeDelay={closeDelay} render={ <span className={cn("cursor-default", className)} {...props}> {children} </span> } /> );}
function HoverCardContent({ children, className, side = "top", align = "center", ...props}: PopoverPrimitive.Popup.Props & Pick< PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >) { const { alignOffset = 0, sideOffset = 8, ...popupProps } = props;
return ( <PopoverPrimitive.Portal> <PopoverPrimitive.Positioner side={side} sideOffset={sideOffset} align={align} alignOffset={alignOffset} collisionPadding={8} collisionAvoidance={{ side: "flip", align: "shift", fallbackAxisSide: "none", }} className="isolate z-50" > <PopoverPrimitive.Popup className={cn( "z-50 w-64 max-w-[calc(100vw-1rem)] rounded-lg border border-(--color-border) bg-(--color-bg-elevated) shadow-lg outline-none", className, )} {...popupProps} > {children} </PopoverPrimitive.Popup> </PopoverPrimitive.Positioner> </PopoverPrimitive.Portal> );}
export { HoverCard, HoverCardContent, HoverCardTrigger };