release 0.3.4

apps/web/ui/shared/popover.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Dispatch, SetStateAction, ReactNode, useRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import useWindowSize from "@/lib/hooks/use-window-size";
+import Leaflet from "./leaflet";
+
+export default function Popover({
+  children,
+  content,
+  align = "center",
+  openPopover,
+  setOpenPopover,
+}: {
+  children: ReactNode;
+  content: ReactNode | string;
+  align?: "center" | "start" | "end";
+  openPopover: boolean;
+  setOpenPopover: Dispatch<SetStateAction<boolean>>;
+}) {
+  const { isMobile, isDesktop } = useWindowSize();
+  if (!isMobile && !isDesktop) return <>{children}</>;
+  return (
+    <>
+      {isMobile && children}
+      {openPopover && isMobile && (
+        <Leaflet setShow={setOpenPopover} showBlur={true}>
+          {content}
+        </Leaflet>
+      )}
+      {isDesktop && (
+        <PopoverPrimitive.Root
+          open={openPopover}
+          onOpenChange={(isOpen) => setOpenPopover(isOpen)}
+        >
+          <PopoverPrimitive.Trigger className="inline-flex" asChild>
+            {children}
+          </PopoverPrimitive.Trigger>
+          <PopoverPrimitive.Content
+            sideOffset={4}
+            align={align}
+            className="z-20 animate-slide-up-fade items-center rounded-md border border-gray-200 bg-white drop-shadow-lg"
+          >
+            {content}
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Root>
+      )}
+    </>
+  );
+}