pop up embed

client/src/app/(embed)/embed/page.tsx

@@ -1,9 +1,17 @@
+"use client";
 import CountryDetail from "@/containers/countries/countries-detail";
+import Popup from "@/containers/popup";
+
+import { useSyncCountry } from "@/app/store";
 
 export default function EmbedPage() {
+  const [country] = useSyncCountry();
+
   return (
-    <div className="max-w-md xl:max-w-xl 2xl:max-w-4xl">
-      <CountryDetail embed />
-    </div>
+    <Popup visibleKey={country} className="left-0 z-10">
+      <div className=" max-w-md xl:max-w-xl 2xl:max-w-4xl">
+        <CountryDetail embed />
+      </div>
+    </Popup>
   );
 }

client/src/containers/popup/index.tsx

@@ -9,7 +9,8 @@ import { cn } from "@/lib/classnames";
 const Popup = ({
   visibleKey,
   children,
-}: PropsWithChildren<{ visibleKey: string | number | null }>): JSX.Element => {
+  className,
+}: PropsWithChildren<{ visibleKey: string | number | null; className?: string }>): JSX.Element => {
   const [open, setOpen] = useState(false);
 
   const toggleOpen = () => setOpen((prev) => !prev);
@@ -25,6 +26,7 @@ const Popup = ({
           true,
         "-translate-x-full": !open && visibleKey,
         "translate-x-0": open && visibleKey,
+        [className || ""]: !!className,
       })}
     >
       <div className="relative z-10 h-full max-h-screen w-full overflow-auto rounded-br-3xl bg-white">