Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 2x 2x 2x 26x 26x 2x | import type { ComponentPropsWithoutRef, ComponentRef } from 'react';
import { forwardRef } from 'react';
import { cn } from '@/lib/utils';
import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
const Popover = Root;
const PopoverTrigger = Trigger;
const PopoverContent = forwardRef<
ComponentRef<typeof Content>,
ComponentPropsWithoutRef<typeof Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
const contentStyles = [
// Positioning
'z-50',
// Layout
'w-72',
// Appearance
'rounded-md border bg-popover shadow-md',
// Spacing
'p-4',
// Typography
'text-popover-foreground',
// Focus
'outline-none',
// Animations
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'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',
];
return (
<Portal>
<Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(contentStyles.join(' '), className)}
{...props}
/>
</Portal>
);
});
PopoverContent.displayName = Content.displayName;
export { Popover, PopoverTrigger, PopoverContent };
|