From f62b2345f463695ef0f8f79830cd76b6e0332821 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 13 Jan 2024 10:35:22 +0700 Subject: Refactor src migrate folder --- src-migrate/components/seo.tsx | 32 ++++++++++++ src-migrate/components/ui/image.tsx | 46 +++++++++++++++++ src-migrate/components/ui/modal.tsx | 87 ++++++++++++++++++++++++++++++++ src-migrate/components/ui/re-captcha.tsx | 15 ++++++ 4 files changed, 180 insertions(+) create mode 100644 src-migrate/components/seo.tsx create mode 100644 src-migrate/components/ui/image.tsx create mode 100644 src-migrate/components/ui/modal.tsx create mode 100644 src-migrate/components/ui/re-captcha.tsx (limited to 'src-migrate/components') diff --git a/src-migrate/components/seo.tsx b/src-migrate/components/seo.tsx new file mode 100644 index 00000000..1e78ed4d --- /dev/null +++ b/src-migrate/components/seo.tsx @@ -0,0 +1,32 @@ +import { useRouter } from 'next/router' +import React from 'react' +import { NextSeo } from "next-seo" +import { MetaTag, NextSeoProps } from 'next-seo/lib/types'; + +export const Seo = (props: NextSeoProps) => { + const router = useRouter() + + const additionalMetaTags: MetaTag[] = [ + { + property: 'fb:app_id', + content: '270830718811' + }, + { + property: 'fb:page_id', + content: '101759953569' + }, + ] + + if (!!props.additionalMetaTags) additionalMetaTags.push(...props.additionalMetaTags) + + return ( + + ) +} \ No newline at end of file diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx new file mode 100644 index 00000000..a91b2a9d --- /dev/null +++ b/src-migrate/components/ui/image.tsx @@ -0,0 +1,46 @@ +import clsx from 'clsx'; +import NextImage, { ImageProps as NextImageProps } from 'next/image'; +import { useState } from 'react'; + +import clsxm from '~/libs/clsxm'; + +type ImageProps = { + rounded?: string; + classNames?: { + wrapper: string + } +} & NextImageProps; + +const Image = (props: ImageProps) => { + const { alt, src, className, classNames, rounded, ...rest } = props; + const [isLoading, setLoading] = useState(true); + + return ( +
+ setLoading(false)} + {...rest} + /> +
+ ); +}; +export default Image; \ No newline at end of file diff --git a/src-migrate/components/ui/modal.tsx b/src-migrate/components/ui/modal.tsx new file mode 100644 index 00000000..34e1d1c3 --- /dev/null +++ b/src-migrate/components/ui/modal.tsx @@ -0,0 +1,87 @@ +import { useEffect, useState } from "react"; +import ReactDOM from "react-dom"; +import { useRouter } from "next/router"; +import { AnimatePresence, motion } from "framer-motion" +import { useWindowSize } from "usehooks-ts"; +import { XMarkIcon } from "@heroicons/react/24/outline"; +import clsxm from "~/libs/clsxm"; + +export interface ModalProps { + children: React.ReactNode + active: boolean + title?: string + close?: () => void, + className?: string, + mode?: "mobile" | "desktop" +} + +export const Modal = ({ + children, + active = false, + title, + close, + className, + mode +}: ModalProps) => { + const router = useRouter() + const { width } = useWindowSize() + const [rendered, setRendered] = useState(false) + + mode = mode || width >= 768 ? "desktop" : "mobile" + + 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 w-11/12 md:w-[500px] border rounded-xl": mode === 'desktop', + "left-0 w-full border-t bottom-0 rounded-t-xl": mode === 'mobile' + }, + className + ) + + const variant = { + 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 } + } + + return rendered && ReactDOM.createPortal( + + {active && ( + + )} + + {active && ( + +
+
+ {title} +
+ {close && ( + + )} +
+ + {children} + + )} + + , + document.querySelector('body')! + ) +} \ No newline at end of file diff --git a/src-migrate/components/ui/re-captcha.tsx b/src-migrate/components/ui/re-captcha.tsx new file mode 100644 index 00000000..e31aa1e3 --- /dev/null +++ b/src-migrate/components/ui/re-captcha.tsx @@ -0,0 +1,15 @@ +import ReCAPTCHA, { ReCAPTCHAProps } from "react-google-recaptcha" + +const GOOGLE_RECAPTCHA_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE || '' + +export interface ReCaptchaProps extends Omit { + sitekey?: string; +} + +export const ReCaptcha = (props: ReCaptchaProps) => { + const { sitekey, ...rest } = props + + return ( + + ) +} -- cgit v1.2.3 From a70fd5b6d9c7a769ac1aaa22a7d037ba3be27a05 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 16 Jan 2024 16:08:43 +0700 Subject: Update improve product detail performance --- src-migrate/components/ui/image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index a91b2a9d..c7ed0b0e 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,7 +26,7 @@ const Image = (props: ImageProps) => { > Date: Wed, 17 Jan 2024 09:54:59 +0700 Subject: Update image for performance --- src-migrate/components/ui/image.tsx | 43 +++++++++++++------------------------ 1 file changed, 15 insertions(+), 28 deletions(-) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c7ed0b0e..c1dde170 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -1,4 +1,3 @@ -import clsx from 'clsx'; import NextImage, { ImageProps as NextImageProps } from 'next/image'; import { useState } from 'react'; @@ -6,41 +5,29 @@ import clsxm from '~/libs/clsxm'; type ImageProps = { rounded?: string; - classNames?: { - wrapper: string - } } & NextImageProps; const Image = (props: ImageProps) => { - const { alt, src, className, classNames, rounded, ...rest } = props; + const { alt, src, className, rounded, ...rest } = props; const [isLoading, setLoading] = useState(true); return ( -
- setLoading(false)} - {...rest} - /> -
+ src={src} + alt={alt} + loading='lazy' + quality={100} + onLoadingComplete={() => setLoading(false)} + {...rest} + /> ); }; export default Image; \ No newline at end of file -- cgit v1.2.3 From e7054b1ff60aae39f255210ff0cfa2217e8d844c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 19 Jan 2024 13:45:56 +0700 Subject: Add unique timestamp on image component --- src-migrate/components/ui/image.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c1dde170..a65d4ec7 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -11,6 +11,8 @@ const Image = (props: ImageProps) => { const { alt, src, className, rounded, ...rest } = props; const [isLoading, setLoading] = useState(true); + const uniqueTimestamp = new Date().getTime(); + return ( { rounded, className )} - src={src} + src={`${src}?v=${uniqueTimestamp}`} alt={alt} loading='lazy' quality={100} -- cgit v1.2.3 From fea243da06cef56a1ccd212b9273e02678750237 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 19 Jan 2024 13:57:33 +0700 Subject: Fix image component --- src-migrate/components/ui/image.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index a65d4ec7..c1dde170 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -11,8 +11,6 @@ const Image = (props: ImageProps) => { const { alt, src, className, rounded, ...rest } = props; const [isLoading, setLoading] = useState(true); - const uniqueTimestamp = new Date().getTime(); - return ( { rounded, className )} - src={`${src}?v=${uniqueTimestamp}`} + src={src} alt={alt} loading='lazy' quality={100} -- cgit v1.2.3 From e49eba371229a643588d49d7ef408b6ef9469d53 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 19 Jan 2024 14:34:17 +0700 Subject: Update image component with unoptimized --- src-migrate/components/ui/image.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c1dde170..de0ad1da 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,6 +26,7 @@ const Image = (props: ImageProps) => { loading='lazy' quality={100} onLoadingComplete={() => setLoading(false)} + unoptimized {...rest} /> ); -- cgit v1.2.3 From 1c5849265622dab23b99b2ffdbf7ced3b65d30cd Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 22 Jan 2024 11:01:28 +0700 Subject: Update package and image components --- src-migrate/components/ui/image.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index de0ad1da..c1dde170 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,7 +26,6 @@ const Image = (props: ImageProps) => { loading='lazy' quality={100} onLoadingComplete={() => setLoading(false)} - unoptimized {...rest} /> ); -- cgit v1.2.3 From e5f95cc1fd8381c8f8d96d9ad3aded14afbfdb91 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 22 Jan 2024 13:02:47 +0700 Subject: Update image component --- src-migrate/components/ui/image.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/image.tsx b/src-migrate/components/ui/image.tsx index c1dde170..de0ad1da 100644 --- a/src-migrate/components/ui/image.tsx +++ b/src-migrate/components/ui/image.tsx @@ -26,6 +26,7 @@ const Image = (props: ImageProps) => { loading='lazy' quality={100} onLoadingComplete={() => setLoading(false)} + unoptimized {...rest} /> ); -- cgit v1.2.3 From bb1451372cd847def47fcaed6669a72c664f68e3 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 13:53:53 +0700 Subject: Create and implement smooth render --- src-migrate/components/ui/smooth-render.tsx | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src-migrate/components/ui/smooth-render.tsx (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx new file mode 100644 index 00000000..0e9a4096 --- /dev/null +++ b/src-migrate/components/ui/smooth-render.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import clsxm from '~/libs/clsxm' + +type Props = { + children: React.ReactNode, + isLoaded: boolean, + height: number, + duration?: number + delay?: number +} & React.HTMLProps + +const SmoothRender = (props: Props) => { + const { + children, + isLoaded, + height, + duration = 0, + delay = 0, + style, + className, + ...rest + } = props + + return ( +
+ {isLoaded && children} +
+ ) +} + +export default SmoothRender \ No newline at end of file -- cgit v1.2.3 From 5d3807a89596958a1e23e02ae11f73a2474c3432 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 20 Feb 2024 22:27:06 +0700 Subject: Update smooth render function --- src-migrate/components/ui/smooth-render.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src-migrate/components') diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx index 0e9a4096..5de3b28d 100644 --- a/src-migrate/components/ui/smooth-render.tsx +++ b/src-migrate/components/ui/smooth-render.tsx @@ -4,9 +4,9 @@ import clsxm from '~/libs/clsxm' type Props = { children: React.ReactNode, isLoaded: boolean, - height: number, - duration?: number - delay?: number + height: string, + duration?: string + delay?: string } & React.HTMLProps const SmoothRender = (props: Props) => { @@ -26,9 +26,9 @@ const SmoothRender = (props: Props) => { className={clsxm('overflow-y-hidden transition-all', className)} style={{ opacity: isLoaded ? 1 : 0, - height: isLoaded ? `${height}px` : 0, - transitionDuration: `${duration}ms`, - transitionDelay: `${delay}ms`, + height: isLoaded ? height : 0, + transitionDuration: duration || '', + transitionDelay: delay || '', ...style }} {...rest} -- cgit v1.2.3