popover.jsx 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. "use client"
  2. import * as React from "react"
  3. import * as PopoverPrimitive from "@radix-ui/react-popover"
  4. import { cn } from "@/lib/utils"
  5. function Popover({
  6. ...props
  7. }) {
  8. return <PopoverPrimitive.Root data-slot="popover" {...props} />;
  9. }
  10. function PopoverTrigger({
  11. ...props
  12. }) {
  13. return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
  14. }
  15. function PopoverContent({
  16. className,
  17. align = "center",
  18. sideOffset = 4,
  19. ...props
  20. }) {
  21. return (
  22. <PopoverPrimitive.Portal>
  23. <PopoverPrimitive.Content
  24. data-slot="popover-content"
  25. align={align}
  26. sideOffset={sideOffset}
  27. className={cn(
  28. "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
  29. className
  30. )}
  31. {...props} />
  32. </PopoverPrimitive.Portal>
  33. );
  34. }
  35. function PopoverAnchor({
  36. ...props
  37. }) {
  38. return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
  39. }
  40. export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }