38 lines
946 B
TypeScript
38 lines
946 B
TypeScript
import * as HoverCard from "@radix-ui/react-hover-card";
|
|
import { ComponentProps } from "react";
|
|
|
|
export interface PopoverProps {
|
|
content?: JSX.Element | string;
|
|
children?: JSX.Element;
|
|
arrowClassName?: string;
|
|
popoverClassName?: string;
|
|
noArrow?: boolean;
|
|
align?: ComponentProps<typeof HoverCard.Content>["align"];
|
|
}
|
|
|
|
export default function HoverPopover(props: PopoverProps) {
|
|
const {
|
|
content,
|
|
children,
|
|
arrowClassName,
|
|
popoverClassName,
|
|
noArrow = false,
|
|
align,
|
|
} = props;
|
|
return (
|
|
<HoverCard.Root>
|
|
<HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
|
|
<HoverCard.Portal>
|
|
<HoverCard.Content
|
|
className={`${popoverClassName}`}
|
|
sideOffset={5}
|
|
align={align}
|
|
>
|
|
{content}
|
|
{!noArrow && <HoverCard.Arrow className={`${arrowClassName}`} />}
|
|
</HoverCard.Content>
|
|
</HoverCard.Portal>
|
|
</HoverCard.Root>
|
|
);
|
|
}
|