Popover

1'use client';
2 
3import {
4  Anchor,
5  Content,
6  Portal,
7  Root,
8  Trigger,
9} from '@radix-ui/react-popover';
10import { cn } from '@/lib/classnames';
11import type { ComponentProps } from 'react';
12 
13function PopoverRoot({ ...props }: ComponentProps<typeof Root>) {
14  return <Root data-slot='popover' {...props} />;
15}
16 
17function PopoverTrigger({ ...props }: ComponentProps<typeof Trigger>) {
18  return <Trigger data-slot='popover-trigger' {...props} />;
19}
20 
21function PopoverContent({
22  className,
23  align = 'center',
24  sideOffset = 4,
25  ...props
26}: ComponentProps<typeof Content>) {
27  return (
28    <Portal>
29      <Content
30        align={align}
31        className={cn(
32          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
33          className,
34        )}
35        data-slot='popover-content'
36        sideOffset={sideOffset}
37        {...props}
38      />
39    </Portal>
40  );
41}
42 
43function PopoverAnchor({ ...props }: ComponentProps<typeof Anchor>) {
44  return <Anchor data-slot='popover-anchor' {...props} />;
45}
46 
47const Popover = Object.assign(PopoverRoot, {
48  Trigger: PopoverTrigger,
49  Content: PopoverContent,
50  Anchor: PopoverAnchor,
51});
52 
53export { Popover };