import * as Popover from "@radix-ui/react-popover"; import React from "react"; import { classNames } from "@calcom/lib"; import { Tooltip } from "@calcom/ui"; import { FiChevronDown } from "../icon"; export const AnimatedPopover = ({ text, count, children, }: { text: string; count?: number; children: React.ReactNode; }) => { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); // calculate which aligment to open the popover with based on which half of the screen it is on (left or right) const [align, setAlign] = React.useState<"start" | "end">("start"); React.useEffect(() => { const handleResize = () => { const halfWidth = window.innerWidth / 2; const { x, y } = ref?.current?.getBoundingClientRect() || { x: 0, y: 0, }; if (x > halfWidth) { setAlign("end"); } else { setAlign("start"); } }; handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, [setAlign]); return (
{text} {count && count > 0 && (
{count}
)}
{children}
); };