📝 Docs: 添加商店表单支持 (#2460)

Co-authored-by: Ju4tCode <42488585+yanyongyu@users.noreply.github.com>

website/src/components/Modal/index.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+
+import clsx from "clsx";
+
+import IconClose from "@theme/Icon/Close";
+
+import "./styles.css";
+
+export type Props = {
+  children?: React.ReactNode;
+  className?: string;
+  title: string;
+  useCustomTitle?: boolean;
+  backdropExit?: boolean;
+  setOpenModal: (isOpen: boolean) => void;
+};
+
+export default function Modal({
+  setOpenModal,
+  className,
+  children,
+  useCustomTitle,
+  backdropExit,
+  title,
+}: Props): JSX.Element {
+  const [transitionClass, setTransitionClass] = useState<string>("");
+
+  const onFadeIn = () => setTransitionClass("fade-in");
+  const onFadeOut = () => setTransitionClass("fade-out");
+  const onTransitionEnd = () =>
+    transitionClass === "fade-out" && setOpenModal(false);
+
+  useEffect(onFadeIn, []);
+
+  return (
+    <div className={clsx("nb-modal-root", className)}>
+      <div
+        className={clsx("nb-modal-backdrop", transitionClass)}
+        onTransitionEnd={onTransitionEnd}
+        onClick={() => backdropExit && onFadeOut()}
+      />
+      <div className={clsx("nb-modal-container", transitionClass)}>
+        <div className="card bg-base-100 shadow-xl">
+          <div className="card-body">
+            {!useCustomTitle && (
+              <div className="nb-modal-title">
+                {title}
+                <div className="card-actions ml-auto">
+                  <button className="btn btn-square btn-sm" onClick={onFadeOut}>
+                    <IconClose />
+                  </button>
+                </div>
+              </div>
+            )}
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/components/Modal/styles.css

@@ -0,0 +1,36 @@
+.nb-modal {
+  &-title {
+    @apply flex items-center font-bold;
+  }
+
+  &-root {
+    @apply fixed z-[1300] inset-0 flex items-center justify-center;
+  }
+
+  &-container {
+    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 min-w-[400px] lg:min-w-[600px];
+    @apply p-8 opacity-0;
+    @apply transition-opacity duration-[225ms] ease-in-out delay-0;
+
+    &.fade-in {
+      @apply opacity-100;
+    }
+
+    &.fade-out {
+      @apply opacity-0;
+    }
+  }
+
+  &-backdrop {
+    @apply fixed flex right-0 bottom-0 top-0 left-0 bg-transparent opacity-0;
+    @apply transition-all duration-[225ms] ease-in-out delay-0 -z-[1];
+
+    &.fade-in {
+      @apply opacity-100 bg-black/50;
+    }
+
+    &.fade-out {
+      @apply opacity-0 bg-transparent;
+    }
+  }
+}