From 90710579ba1c12060877f6ec2d26103f9c31058d Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 23 Oct 2023 17:11:33 +0700 Subject: Refactor and migrate register page --- src-migrate/common/components/elements/Modal.tsx | 84 ++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 src-migrate/common/components/elements/Modal.tsx (limited to 'src-migrate/common/components/elements') diff --git a/src-migrate/common/components/elements/Modal.tsx b/src-migrate/common/components/elements/Modal.tsx new file mode 100644 index 00000000..ad1fe51b --- /dev/null +++ b/src-migrate/common/components/elements/Modal.tsx @@ -0,0 +1,84 @@ +import { XMarkIcon } from "@heroicons/react/24/outline"; +import { AnimatePresence, motion } from "framer-motion" +import { useEffect, useState } from "react"; +import ReactDOM from "react-dom"; +import { useWindowSize } from "usehooks-ts"; +import clsxm from "~/common/libs/clsxm"; + + +type Props = { + children: React.ReactNode + active: boolean + title?: string + close?: () => void, + className?: string +} + +const Modal = ({ + children, + active = false, + title, + close, + className +}: Props) => { + const { width } = useWindowSize() + const [rendered, setRendered] = useState(false) + + useEffect(() => { + setRendered(true) + }, []) + + const modalClassNames = clsxm( + "fixed bg-white max-h-[80vh] overflow-auto p-4 pt-0 z-[60] border-gray_r-6", + { + "left-1/2 -translate-x-1/2 translate-y-1/2 bottom-1/2 md:w-1/4 lg:w-1/3 border rounded-xl": width >= 768, + "left-0 w-full border-t bottom-0 rounded-t-xl": width < 768 + }, + className + ) + + const variant = { + initial: { bottom: width >= 768 ? '45%' : '-100%', opacity: 0 }, + animate: { bottom: width >= 768 ? '50%' : 0, opacity: 1 }, + exit: { bottom: width >= 768 ? '55%' : '-100%', opacity: 0 }, + transition: { ease: 'linear', duration: 0.25 } + } + + return rendered && ReactDOM.createPortal( + + {active && ( + + )} + + {active && ( + +
+
+ {title} +
+ {close && ( + + )} +
+ + {children} + + )} + + , + document.querySelector('body')! + ) +} + +export default Modal \ No newline at end of file -- cgit v1.2.3 From cf6da809621b4ebe8c9acedb035b689e7e1b60b1 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 25 Oct 2023 17:27:32 +0700 Subject: Update register page --- src-migrate/common/components/elements/Modal.tsx | 18 +++++++++++------- src-migrate/common/components/elements/ReCaptcha.tsx | 17 +++++++++++++++++ 2 files changed, 28 insertions(+), 7 deletions(-) create mode 100644 src-migrate/common/components/elements/ReCaptcha.tsx (limited to 'src-migrate/common/components/elements') diff --git a/src-migrate/common/components/elements/Modal.tsx b/src-migrate/common/components/elements/Modal.tsx index ad1fe51b..91421251 100644 --- a/src-migrate/common/components/elements/Modal.tsx +++ b/src-migrate/common/components/elements/Modal.tsx @@ -11,7 +11,8 @@ type Props = { active: boolean title?: string close?: () => void, - className?: string + className?: string, + mode?: "mobile" | "desktop" } const Modal = ({ @@ -19,11 +20,14 @@ const Modal = ({ active = false, title, close, - className + className, + mode }: Props) => { const { width } = useWindowSize() const [rendered, setRendered] = useState(false) + mode = mode || width >= 768 ? "desktop" : "mobile" + useEffect(() => { setRendered(true) }, []) @@ -31,16 +35,16 @@ const Modal = ({ const modalClassNames = clsxm( "fixed bg-white max-h-[80vh] overflow-auto p-4 pt-0 z-[60] border-gray_r-6", { - "left-1/2 -translate-x-1/2 translate-y-1/2 bottom-1/2 md:w-1/4 lg:w-1/3 border rounded-xl": width >= 768, - "left-0 w-full border-t bottom-0 rounded-t-xl": width < 768 + "left-1/2 -translate-x-1/2 translate-y-1/2 bottom-1/2 w-11/12 md:w-1/4 lg:w-1/3 border rounded-xl": mode === 'desktop', + "left-0 w-full border-t bottom-0 rounded-t-xl": mode === 'mobile' }, className ) const variant = { - initial: { bottom: width >= 768 ? '45%' : '-100%', opacity: 0 }, - animate: { bottom: width >= 768 ? '50%' : 0, opacity: 1 }, - exit: { bottom: width >= 768 ? '55%' : '-100%', opacity: 0 }, + initial: { bottom: mode === 'desktop' ? '45%' : '-100%', opacity: 0 }, + animate: { bottom: mode === 'desktop' ? '50%' : 0, opacity: 1 }, + exit: { bottom: mode === 'desktop' ? '55%' : '-100%', opacity: 0 }, transition: { ease: 'linear', duration: 0.25 } } diff --git a/src-migrate/common/components/elements/ReCaptcha.tsx b/src-migrate/common/components/elements/ReCaptcha.tsx new file mode 100644 index 00000000..1bc31d90 --- /dev/null +++ b/src-migrate/common/components/elements/ReCaptcha.tsx @@ -0,0 +1,17 @@ +import ReCAPTCHA, { ReCAPTCHAProps } from "react-google-recaptcha" + +const GOOGLE_RECAPTCHA_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE || '' + +type Props = Omit & { + sitekey?: string; +} + +const ReCaptcha = (props: Props) => { + const { sitekey, ...rest } = props + + return ( + + ) +} + +export default ReCaptcha \ No newline at end of file -- cgit v1.2.3 From c82110f7d3a2f85de99045fde7b579e369f15b2c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 28 Oct 2023 09:05:00 +0700 Subject: Update authentication feature --- src-migrate/common/components/elements/Modal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src-migrate/common/components/elements') diff --git a/src-migrate/common/components/elements/Modal.tsx b/src-migrate/common/components/elements/Modal.tsx index 91421251..8e488a3a 100644 --- a/src-migrate/common/components/elements/Modal.tsx +++ b/src-migrate/common/components/elements/Modal.tsx @@ -1,5 +1,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline"; import { AnimatePresence, motion } from "framer-motion" +import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import { useWindowSize } from "usehooks-ts"; @@ -23,6 +24,7 @@ const Modal = ({ className, mode }: Props) => { + const router = useRouter() const { width } = useWindowSize() const [rendered, setRendered] = useState(false) @@ -49,7 +51,7 @@ const Modal = ({ } return rendered && ReactDOM.createPortal( - + {active && (