From fac4c51547a3ffcd5582bf76e9375e84db21c289 Mon Sep 17 00:00:00 2001 From: Tan Nguyen Date: Sat, 1 Jan 2022 23:36:22 +0700 Subject: [PATCH] finish. missing: page transition - required: Layout --- components/common/Navbar.tsx | 57 ++++++++++++-------- components/helper/FramerMotionHelper.tsx | 28 ++-------- components/helper/NextHelper.tsx | 37 +++++++++++++ components/helper/NextLinkHelper.tsx | 22 -------- components/helper/index.ts | 2 +- pages/_app.tsx | 2 +- pages/destination.tsx | 9 ++-- pages/index.tsx | 67 +++++++++++++++--------- 8 files changed, 123 insertions(+), 101 deletions(-) create mode 100644 components/helper/NextHelper.tsx delete mode 100644 components/helper/NextLinkHelper.tsx diff --git a/components/common/Navbar.tsx b/components/common/Navbar.tsx index b2fbd4d..daed52e 100644 --- a/components/common/Navbar.tsx +++ b/components/common/Navbar.tsx @@ -1,35 +1,33 @@ import { Divider, Grid, - Box, Text, useColorModeValue, Center, } from "@chakra-ui/react"; import { motion } from "framer-motion"; -import NextImage from "next/image"; import NextLink from "next/link"; import { useRouter } from "next/router"; -import React from "react"; import { nav } from "utils"; import { - CustomVariants, _afterUnderlineStyle, _sxHoverAfterUnderlineStyle, + RotateWithZoomVariantProps, + routerShallowPush, } from "@/components/helper"; -const svgVariants: CustomVariants = { - hidden: { - // scale: 0, - }, +const logoVariants: RotateWithZoomVariantProps = { visible: { - // scale: 1, rotate: [0, 360], - transition: { repeat: "Infinity", duration: 2, ease: "linear" }, + transition: { duration: 2, ease: "linear", repeat: Infinity }, // for rotate + }, + hover: { + scale: 1.3, }, - whileHover: { - scale: 1.5, - transition: { duration: 0.5, ease: "linear" }, + // for hover + hoverTransition: { + duration: 1, + ease: "linear", }, }; @@ -39,6 +37,7 @@ export interface NavbarProps {} export const Navbar = ({}: NavbarProps) => { const router = useRouter(); + return ( { tablet: "0 0 0 24px", desktop: "20px 22.5px", // py px }} + > - {/* */} + {/* Ko dung vi logo size nho + + + */} routerShallowPush(router, "/")} + style={{ + cursor: "pointer", + }} /> = Omit & T; +// type Merge = Omit & T; -type BoxMotionProps = Merge>; -export const BoxMotion: React.FC = motion(Box); - -type CenterMotionProps = Merge>; -export const CenterMotion: React.FC = motion(Center); -// export const CenterMotion = motion(Center); - -type TabMotionProps = Merge>; -export const TabMotion: React.FC = motion(Tab); - -// type NextImageMotionProps = Merge>; -// export const NextImageMotion: React.FC = motion(NextImage); -export const NextImageMotion = motion(NextImage); +// type BoxMotionProps = Merge>; +// export const BoxMotion: React.FC = motion(Box); /** * @description Strengthen _framer-motion_ `Variants, Variant` type diff --git a/components/helper/NextHelper.tsx b/components/helper/NextHelper.tsx new file mode 100644 index 0000000..da14020 --- /dev/null +++ b/components/helper/NextHelper.tsx @@ -0,0 +1,37 @@ +import { chakra, shouldForwardProp } from "@chakra-ui/react"; +import NextLink from "next/link"; +import { NextRouter } from "next/router"; + +export const NextLinkHelper = chakra(NextLink, { + shouldForwardProp: (prop) => { + // don't forward Chakra's props + const isChakraProp = !shouldForwardProp(prop); + if (isChakraProp) return false; + + // else, only forward `sample` prop + return [ + "href", + "as", + "replace", + "scroll", + "shallow", + "passHref", + "prefetch", + "locale", + ].includes(prop); + }, +}); + +// https://stackoverflow.com/questions/43335962/purpose-of-declare-keyword-in-typescript +// Summary: declare fix loi bien nay da khai bao roi --> khai bao lai +declare type Url = URL | string; + +/** + * Strengthen original router.push() + * @param router Component's current using router + * @param url + * @returns `router.push(url, undefined, { shallow: true })` + */ +export function routerShallowPush(router: NextRouter, url: Url) { + return router.push(url, undefined, { shallow: true }); +} diff --git a/components/helper/NextLinkHelper.tsx b/components/helper/NextLinkHelper.tsx deleted file mode 100644 index 93703ae..0000000 --- a/components/helper/NextLinkHelper.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { chakra, shouldForwardProp } from "@chakra-ui/react"; -import NextLink from "next/link"; - -export const NextLinkHelper = chakra(NextLink, { - shouldForwardProp: (prop) => { - // don't forward Chakra's props - const isChakraProp = !shouldForwardProp(prop); - if (isChakraProp) return false; - - // else, only forward `sample` prop - return [ - "href", - "as", - "replace", - "scroll", - "shallow", - "passHref", - "prefetch", - "locale", - ].includes(prop); - }, -}); diff --git a/components/helper/index.ts b/components/helper/index.ts index 68bea04..5162304 100644 --- a/components/helper/index.ts +++ b/components/helper/index.ts @@ -1,3 +1,3 @@ -export * from "./NextLinkHelper" +export * from "./NextHelper" export * from "./FramerMotionHelper" export * from "./DynamicStyle" diff --git a/pages/_app.tsx b/pages/_app.tsx index cb60f81..7f7267f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,4 @@ -import '../styles/globals.css' +import "../styles/globals.css"; import type { AppProps } from "next/app"; import { ChakraProvider } from "@chakra-ui/react"; import { theme } from "utils"; diff --git a/pages/destination.tsx b/pages/destination.tsx index 4bddf4e..9029d07 100644 --- a/pages/destination.tsx +++ b/pages/destination.tsx @@ -15,11 +15,8 @@ import { import type { NextPage } from "next"; import { h1, h2, h4, h5, nav, listSubH1, listSubH2 } from "utils"; import { - BoxMotion, - CenterMotion, CustomVariantsProps, RotateWithZoomVariantProps, - TabMotion, _afterUnderlineStyle, _sxHoverAfterUnderlineStyle, } from "@/components/helper"; @@ -69,7 +66,7 @@ const boxVariants: CustomVariantsProps = { }, }; -const planetVariant: RotateWithZoomVariantProps = { +const planetVariants: RotateWithZoomVariantProps = { visible: { rotate: [0, 360], transition: { duration: 60, ease: "linear", repeat: Infinity }, // for rotate @@ -120,10 +117,10 @@ const Destination: NextPage = () => { Pick your destination { + const router = useRouter(); + return ( { justifyItems={{ mobile: "center", desktop: "unset" }} gap={{ mobile: "20", desktop: "0" }} py="32" + as={motion.div} + variants={contentVariants} + layout="size" + initial="hidden" + animate="visible" > - + { Well sit back, and relax because we'll give you a truly out of this world experience! - +
{ bgColor="white" color="custom.1" letterSpacing="2px" + onClick={() => routerShallowPush(router, "/destination")} + cursor="pointer" + variants={exploreAuraVariants} + whileHover="exploreHover" + transition={exploreAuraVariants.hoverTransition} // chakra syntax > Explore - { height="100%" borderRadius="50%" position="absolute" - bgColor="rgba(255,255,255,0.1)" + bgColor="rgba(255,255,255,0.2)" mixBlendMode="normal" - initial={{ - scale: 1, - opacity: 0, - }} - whileHover={{ - scale: 1.5, - opacity: 1, - }} - transition={{ - duration: 0.5, - }} + variants={exploreAuraVariants} + animate="visible" + whileHover="auraHover" + transition={exploreAuraVariants.hoverTransition} // chakra syntax />