34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
import type { ReactNode } from 'react';
|
|
|
|
type PopoverProps = {
|
|
trigger: ReactNode;
|
|
tooltip?: ReactNode;
|
|
children: ReactNode;
|
|
open?: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
};
|
|
|
|
export default function Popover({ trigger, tooltip, children, open, onOpenChange }: PopoverProps) {
|
|
return (
|
|
<PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
|
|
{/* {tooltip ? (
|
|
<Tooltip label={tooltip}>
|
|
<PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
|
|
</Tooltip>
|
|
) : ( */}
|
|
<PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
|
|
{/* )} */}
|
|
<PopoverPrimitive.Portal>
|
|
<PopoverPrimitive.Content
|
|
className="data-open:animate-fadeIn data-closed:animate-fadeOut z-20 rounded border border-highlight-primary bg-secondary"
|
|
sideOffset={5}
|
|
collisionPadding={8}
|
|
>
|
|
{children}
|
|
<PopoverPrimitive.Arrow className=" fill-white" />
|
|
</PopoverPrimitive.Content>
|
|
</PopoverPrimitive.Portal>
|
|
</PopoverPrimitive.Root>
|
|
);
|
|
}
|