From 794ee1cccf2ee7261fb7a866b4ab1763338b2fa2 Mon Sep 17 00:00:00 2001
From: Stefan Pejcic <stefan@pejcic.rs>
Date: Wed, 10 Jul 2024 19:55:53 +0200
Subject: [PATCH] Delete
 documentation/src/refine-theme/landing-playground-modal.tsx

---
 .../refine-theme/landing-playground-modal.tsx | 188 ------------------
 1 file changed, 188 deletions(-)
 delete mode 100644 documentation/src/refine-theme/landing-playground-modal.tsx

diff --git a/documentation/src/refine-theme/landing-playground-modal.tsx b/documentation/src/refine-theme/landing-playground-modal.tsx
deleted file mode 100644
index c48f9646..00000000
--- a/documentation/src/refine-theme/landing-playground-modal.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React, { Fragment } from "react";
-import clsx from "clsx";
-import { Dialog, Transition } from "@headlessui/react";
-import { useLocation } from "@docusaurus/router";
-import { useColorMode } from "@docusaurus/theme-common";
-import { CloseIcon } from "./icons/close";
-
-export const LandingPlaygroundModal = ({ visible, close }) => {
-    const iframeRef = React.useRef<HTMLIFrameElement>(null);
-    const { colorMode } = useColorMode();
-
-    const { search, hash } = useLocation();
-
-    const [isActive, setIsActive] = React.useState(false);
-
-    React.useEffect(() => {
-        // when color mode changes, post a message to the iframe
-        // to update its color mode
-        if (iframeRef.current) {
-            iframeRef.current.contentWindow?.postMessage(
-                {
-                    type: "colorMode",
-                    colorMode,
-                },
-                "*",
-            );
-        }
-    }, [colorMode, visible, isActive]);
-
-    React.useEffect(() => {
-        const mediaQuery = window.matchMedia("(max-width: 959px)");
-
-        setIsActive(mediaQuery.matches);
-
-        const listener = () => {
-            setIsActive(mediaQuery.matches);
-        };
-
-        mediaQuery.addEventListener("change", listener);
-
-        return () => {
-            mediaQuery.removeEventListener("change", listener);
-        };
-    }, []);
-
-    const [params, setParams] = React.useState<Record<string, string>>({});
-
-    const scrollToItem = React.useCallback(() => {
-        const playgroundElement = document.getElementById("playground");
-        if (playgroundElement) {
-            playgroundElement.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-                inline: "nearest",
-            });
-        }
-    }, []);
-
-    React.useEffect(() => {
-        const _params = new URLSearchParams(search);
-        const paramsObj: Record<string, string> = {};
-
-        // @ts-expect-error no downlevel iteration
-        for (const [key, value] of _params.entries()) {
-            paramsObj[key] = value;
-        }
-
-        setParams(paramsObj);
-    }, [search]);
-
-    React.useEffect(() => {
-        if (params.playground || hash === "#playground") {
-            scrollToItem();
-        }
-    }, [params.playground, hash]);
-
-    const closePlayground = React.useCallback(() => {
-        close();
-    }, []);
-
-    React.useEffect(() => {
-        if (isActive && visible) {
-            if (typeof document !== "undefined" && document.documentElement) {
-                document.documentElement.style.scrollBehavior = "unset";
-            }
-        } else {
-            setTimeout(() => {
-                if (
-                    typeof document !== "undefined" &&
-                    document.documentElement
-                ) {
-                    document.documentElement.style.scrollBehavior = "smooth";
-                }
-            }, 300);
-        }
-    }, [isActive, visible]);
-
-    if (!isActive) return null;
-
-    return (
-        <Transition appear show={!!visible} as={Fragment}>
-            <Dialog
-                as="div"
-                className="relative z-10 bg-gray-100 dark:bg-gray-900 h-full w-full"
-                onClose={closePlayground}
-            >
-                <div
-                    className={clsx(
-                        "fixed top-0 left-0 right-0",
-                        "overflow-y-auto",
-                        "bg-gray-100",
-                        "dark:bg-gray-900",
-                        "h-full",
-                        "w-full",
-                        "z-[10]",
-                    )}
-                >
-                    <div
-                        className={clsx(
-                            "flex",
-                            "py-5",
-                            "px-4",
-                            "landing-md:px-5",
-                            "w-full",
-                            "absolute",
-                            "left-0 top-0",
-                            "items-center justify-end",
-                            "z-[1]",
-                            "max-w-[900px]",
-                            "mx-auto",
-                        )}
-                    >
-                        <button
-                            type="button"
-                            className={clsx(
-                                "rounded-lg",
-                                "text-gray-500",
-                                "hover:bg-gray-200",
-                                "dark:hover:bg-gray-700",
-                                "dark:text-gray-300",
-                                "active:scale-90",
-                                "transition-transform duration-200 ease-in-out",
-                                "focus:outline-none",
-                                "appearance-none",
-                            )}
-                        >
-                            <CloseIcon onClick={closePlayground} />
-                        </button>
-                    </div>
-                    <div
-                        className={clsx(
-                            "flex items-start justify-center",
-                            "min-h-full h-full",
-                            "text-center",
-                            "overflow-auto",
-                        )}
-                    >
-                        <Transition.Child
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 scale-95"
-                            enterTo="opacity-100 scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 scale-100"
-                            leaveTo="opacity-0 scale-95"
-                        >
-                            <div className={clsx("w-full", "h-full")}>
-                                <iframe
-                                    ref={iframeRef}
-                                    src={`https://refine.new/embed-form?theme=${colorMode}`}
-                                    className={clsx(
-                                        "bg-gray-100",
-                                        "dark:bg-gray-900",
-                                        "max-w-[830px]",
-                                        "mx-auto",
-                                        "w-full",
-                                        "h-full",
-                                        "border-none",
-                                    )}
-                                />
-                            </div>
-                        </Transition.Child>
-                    </div>
-                </div>
-            </Dialog>
-        </Transition>
-    );
-};