added survey

components/Drawer.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect } from "react";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { Drawer as D } from "vaul";
+import clsx from "clsx";
 
 type Props = {
   toggleDrawer: Function;
@@ -32,27 +32,24 @@ export default function Drawer({
     return (
       <D.Root
         open={drawerIsOpen}
-        onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
+        onClose={() => dismissible && setDrawerIsOpen(false)}
+        onAnimationEnd={(isOpen) => !isOpen && toggleDrawer()}
         dismissible={dismissible}
       >
         <D.Portal>
           <D.Overlay className="fixed inset-0 bg-black/40" />
-          <ClickAwayHandler
-            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
-          >
-            <D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
-              <div
-                className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
-                data-testid="mobile-modal-container"
-              >
-                <div
-                  className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5 relative z-20"
-                  data-testid="mobile-modal-slider"
-                />
-                {children}
-              </div>
-            </D.Content>
-          </ClickAwayHandler>
+          <D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
+            <div
+              className={clsx(
+                "p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto",
+                className
+              )}
+              data-testid="mobile-modal-container"
+            >
+              <div data-testid="mobile-modal-slider" />
+              {children}
+            </div>
+          </D.Content>
         </D.Portal>
       </D.Root>
     );
@@ -60,27 +57,23 @@ export default function Drawer({
     return (
       <D.Root
         open={drawerIsOpen}
-        onClose={() => dismissible && setTimeout(() => toggleDrawer(), 350)}
+        onClose={() => dismissible && setDrawerIsOpen(false)}
+        onAnimationEnd={(isOpen) => !isOpen && toggleDrawer()}
         dismissible={dismissible}
         direction="right"
       >
         <D.Portal>
           <D.Overlay className="fixed inset-0 bg-black/10 z-20" />
-          <ClickAwayHandler
-            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
-            className="z-30"
-          >
-            <D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto">
-              <div
-                className={
-                  "p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto " +
-                  className
-                }
-              >
-                {children}
-              </div>
-            </D.Content>
-          </ClickAwayHandler>
+          <D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto">
+            <div
+              className={clsx(
+                "p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto",
+                className
+              )}
+            >
+              {children}
+            </div>
+          </D.Content>
         </D.Portal>
       </D.Root>
     );

components/Modal.tsx

@@ -32,28 +32,25 @@ export default function Modal({
     return (
       <Drawer.Root
         open={drawerIsOpen}
-        onClose={() => dismissible && setTimeout(() => toggleModal(), 350)}
+        onClose={() => dismissible && setDrawerIsOpen(false)}
+        onAnimationEnd={(isOpen) => !isOpen && toggleModal()}
         dismissible={dismissible}
       >
         <Drawer.Portal>
           <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-          <ClickAwayHandler
-            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
-          >
-            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+          <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+            <div
+              className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
+              data-testid="mobile-modal-container"
+            >
               <div
-                className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
-                data-testid="mobile-modal-container"
-              >
-                <div
-                  className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
-                  data-testid="mobile-modal-slider"
-                />
+                className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-neutral mb-5"
+                data-testid="mobile-modal-slider"
+              />
 
-                {children}
-              </div>
-            </Drawer.Content>
-          </ClickAwayHandler>
+              {children}
+            </div>
+          </Drawer.Content>
         </Drawer.Portal>
       </Drawer.Root>
     );

components/ModalContent/SurveyModal.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import Modal from "../Modal";
+import Button from "../ui/Button";
+import { useTranslation } from "next-i18next";
+
+type Props = {
+  onClose: Function;
+  submit: Function;
+};
+
+export default function SurveyModal({ onClose, submit }: Props) {
+  const { t } = useTranslation();
+  const [referer, setReferrer] = useState("rather_not_say");
+  const [other, setOther] = useState("");
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">{t("quick_survey")}</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-4">
+        <p>{t("how_did_you_discover_linkwarden")}</p>
+
+        <select
+          onChange={(e) => {
+            setReferrer(e.target.value);
+            setOther("");
+          }}
+          className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
+        >
+          <option value="rather_not_say">{t("rather_not_say")}</option>
+          <option value="search_engine">{t("search_engine")}</option>
+          <option value="people_recommendation">
+            {t("people_recommendation")}
+          </option>
+          <option value="reddit">{t("reddit")}</option>
+          <option value="github">{t("github")}</option>
+          <option value="twitter">{t("twitter")}</option>
+          <option value="mastodon">{t("mastodon")}</option>
+          <option value="lemmy">{t("lemmy")}</option>
+          <option value="other">{t("other")}</option>
+        </select>
+
+        {referer === "other" && (
+          <input
+            type="text"
+            placeholder={t("please_specify")}
+            onChange={(e) => {
+              setOther(e.target.value);
+            }}
+            value={other}
+            className="input border border-neutral-content focus:border-primary focus:outline-none duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
+          />
+        )}
+
+        <Button
+          className="ml-auto mt-3"
+          intent="accent"
+          onClick={() => submit(referer, other)}
+        >
+          <i className="bi-check2 text-xl" />
+          {t("submit")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}