From 3eb538c98a53ba6bfd2243feeab1c2080666ad16 Mon Sep 17 00:00:00 2001 From: Tan Nguyen Date: Sat, 1 Jan 2022 01:33:47 +0700 Subject: [PATCH 1/5] add text, logo animation --- components/common/Navbar.tsx | 27 +++++++++++++++++++++++- components/helper/FramerMotionHelper.tsx | 22 +++++++++++++++++++ components/helper/index.ts | 2 +- pages/index.tsx | 22 +++++++++++++++---- 4 files changed, 67 insertions(+), 6 deletions(-) create mode 100644 components/helper/FramerMotionHelper.tsx diff --git a/components/common/Navbar.tsx b/components/common/Navbar.tsx index 315ee22..a7b7da3 100644 --- a/components/common/Navbar.tsx +++ b/components/common/Navbar.tsx @@ -6,11 +6,28 @@ import { 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 } from "@/components/helper"; + +const svgVariants : CustomVariants = { + hidden: { + // scale: 0, + }, + visible: { + // scale: 1, + rotate: [0, 360], + transition: { repeat: "Infinity", duration: 2, ease: "linear" }, + }, + whileHover: { + scale: 1.5, + transition: { duration: 0.5, ease: "linear" }, + }, +}; // console.log(nav._bordorColor); export interface NavbarProps {} @@ -29,12 +46,20 @@ export const Navbar = ({}: NavbarProps) => { desktop: "20px 22.5px", // py px }} > - */} + = 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 NextImageMotionProps = Merge>; +// export const NextImageMotion: React.FC = motion(NextImage); +export const NextImageMotion = motion(NextImage); + +export interface CustomVariants { + hidden?: object; + visible?: object; + whileHover?: object; +} diff --git a/components/helper/index.ts b/components/helper/index.ts index 86d8e74..cfdf6a5 100644 --- a/components/helper/index.ts +++ b/components/helper/index.ts @@ -1,2 +1,2 @@ export * from "./NextLinkHelper" -export * from "./framer-motion" \ No newline at end of file +export * from "./FramerMotionHelper" diff --git a/pages/index.tsx b/pages/index.tsx index 8bd26c2..6e5b09f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,10 +3,19 @@ import { Navbar } from "@/components/common"; import { Box, Center, Grid, Text } from "@chakra-ui/react"; import type { NextPage } from "next"; import { h1, h2, h4, h5 } from "utils"; -import { CenterMotion } from "@/components/helper"; +import { BoxMotion, CenterMotion, CustomVariants } from "@/components/helper"; // console.log(h5); +const boxVariants: CustomVariants = { + hidden: { transform: "translateY(25%)", opacity: 0 }, + visible: { + transform: "translateY(0%)", + opacity: 1, + transition: { duration: 1.5, ease: "linear" }, + }, +}; + const Home: NextPage = () => { return ( { gap={{ mobile: "20", desktop: "0" }} py="32" > - + { Well sit back, and relax because we'll give you a truly out of this world experience! - +
{ __css={{ aspectRatio: "1", }} + position="relative" borderRadius="50%" p={{ mobile: "4", tablet: "10" }} - position="relative" bgColor="white" color="custom.1" letterSpacing="2px" From dbce441725b07178abdf0e7733c50d6e83cfe682 Mon Sep 17 00:00:00 2001 From: Tan Nguyen Date: Sat, 1 Jan 2022 14:53:48 +0700 Subject: [PATCH 2/5] add destination, tab hover animate not finish --- components/common/Navbar.tsx | 9 +- components/helper/FramerMotionHelper.tsx | 5 +- components/helper/framer-motion/index.ts | 10 -- pages/destination.tsx | 206 +++++++++++++++++++++++ pages/index.tsx | 8 +- styles/globals.css | 2 +- 6 files changed, 223 insertions(+), 17 deletions(-) delete mode 100644 components/helper/framer-motion/index.ts create mode 100644 pages/destination.tsx diff --git a/components/common/Navbar.tsx b/components/common/Navbar.tsx index a7b7da3..e7ac75f 100644 --- a/components/common/Navbar.tsx +++ b/components/common/Navbar.tsx @@ -14,7 +14,7 @@ import React from "react"; import { nav } from "utils"; import { CustomVariants } from "@/components/helper"; -const svgVariants : CustomVariants = { +const svgVariants: CustomVariants = { hidden: { // scale: 0, }, @@ -87,7 +87,7 @@ export const Navbar = ({}: NavbarProps) => { }, }} > - + { >; 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); diff --git a/components/helper/framer-motion/index.ts b/components/helper/framer-motion/index.ts deleted file mode 100644 index a13419a..0000000 --- a/components/helper/framer-motion/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Center, CenterProps } from "@chakra-ui/react"; -import { motion, HTMLMotionProps } from "framer-motion"; - -type Merge = Omit & T; -// type MotionBoxProps = Merge, HTMLMotionProps<"div">>; -// export const MotionBox: React.FC = motion(chakra.div); - -type CenterMotionProps = Merge>; -export const CenterMotion: React.FC = motion(Center); -// export const CenterMotion = motion(Center); diff --git a/pages/destination.tsx b/pages/destination.tsx new file mode 100644 index 0000000..0d5d087 --- /dev/null +++ b/pages/destination.tsx @@ -0,0 +1,206 @@ +import { Navbar } from "@/components/common"; +import { + Box, + Center, + Grid, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, + Text, + Divider, +} from "@chakra-ui/react"; +import type { NextPage } from "next"; +import { h1, h2, h4, h5, nav, listSubH1, listSubH2 } from "utils"; +import { + BoxMotion, + CenterMotion, + CustomVariants, + TabMotion, +} from "@/components/helper"; + +// console.log(h5); + +const content = [ + { + name: "moon", + content: + "See our planet as you've never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you're there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.", + distance: "384.400 km", + travel_time: "3 days", + }, + { + name: "mars", + content: + "Don't forget to pack your hiking boots. You'll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It's two and a half times the size of Everest!", + distance: "255 mil. km", + travel_time: "9 months", + }, +]; + +const boxVariants: CustomVariants = { + hidden: { transform: "translateY(25%)", opacity: 0 }, + visible: { + transform: "translateY(0%)", + opacity: 1, + transition: { duration: 1.5, ease: "linear" }, + }, +}; + +const Destination: NextPage = () => { + return ( + + + +
+ Explore + +
+ + + + {content.map((tab, index) => ( + + {tab.name} + + ))} + + + {content.map((tab, index) => ( + + {tab.name} + {tab.content} + + + + + avg. distance + + {tab.distance} + + + + est. travel time + + {tab.travel_time} + + + + ))} + + + + {/* + + + So, you want to travel to + + + Space + + + + Let's face it. If you want to go to space, you might as well + genuinely go to outer space and not hover kind of on the edge of it. + Well sit back, and relax because we'll give you a truly out of + this world experience! + + */} + + + ); +}; + +export default Destination; diff --git a/pages/index.tsx b/pages/index.tsx index 6e5b09f..263b522 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -19,9 +19,13 @@ const boxVariants: CustomVariants = { const Home: NextPage = () => { return ( div:first-child { } /* Production*/ -/*div#__next, +/* div#__next, div#__next > div { height: 100%; } */ From b69b8b1a462f4d2534685acd14ce8208a77c7fe9 Mon Sep 17 00:00:00 2001 From: Tan Nguyen Date: Sat, 1 Jan 2022 19:40:58 +0700 Subject: [PATCH 3/5] finish outlook --- pages/destination.tsx | 133 +++++++++++++++++------------------------- 1 file changed, 54 insertions(+), 79 deletions(-) diff --git a/pages/destination.tsx b/pages/destination.tsx index 0d5d087..677bb1b 100644 --- a/pages/destination.tsx +++ b/pages/destination.tsx @@ -10,6 +10,7 @@ import { Tabs, Text, Divider, + useTab, } from "@chakra-ui/react"; import type { NextPage } from "next"; import { h1, h2, h4, h5, nav, listSubH1, listSubH2 } from "utils"; @@ -19,6 +20,10 @@ import { CustomVariants, TabMotion, } from "@/components/helper"; +import NextImage from "next/image"; +import { motion } from "framer-motion"; +import { useRouter } from "next/router"; +import React from "react"; // console.log(h5); @@ -37,6 +42,20 @@ const content = [ distance: "255 mil. km", travel_time: "9 months", }, + { + name: "europa", + content: + "The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin", + distance: "628 mil. km", + travel_time: "3 years", + }, + { + name: "titan", + content: + "The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn", + distance: "1.6 bil. km", + travel_time: "7 years", + }, ]; const boxVariants: CustomVariants = { @@ -49,6 +68,8 @@ const boxVariants: CustomVariants = { }; const Destination: NextPage = () => { + const [CurrentTab, setCurrentTab] = React.useState("moon"); // first load + return ( { desktop: "/assets/destination/background-destination-desktop.jpg", }} backgroundRepeat="no-repeat" - backgroundSize="cover" + backgroundSize="cover" > -
- Explore - + + + 01 + + Pick your destination + + -
+ transition={{ duration: 0.6, ease: "easeOut" }} + > + + + @@ -112,6 +126,8 @@ const Destination: NextPage = () => { setCurrentTab(tab.name)} _selected={{ borderBottom: `2px solid ${nav._bordorColor?.active}`, }} @@ -137,8 +153,8 @@ const Destination: NextPage = () => { {content.map((tab, index) => ( {tab.name} - {tab.content} - + {tab.content} + @@ -157,47 +173,6 @@ const Destination: NextPage = () => { ))} - - {/* - - - So, you want to travel to - - - Space - - - - Let's face it. If you want to go to space, you might as well - genuinely go to outer space and not hover kind of on the edge of it. - Well sit back, and relax because we'll give you a truly out of - this world experience! - - */} ); From d8cdb1f5379a9ba053a0e25a4cc624fedf8437c6 Mon Sep 17 00:00:00 2001 From: Tan Nguyen Date: Sat, 1 Jan 2022 22:08:20 +0700 Subject: [PATCH 4/5] prepare for reduce FramerMotionHelper.tsx --- components/common/Navbar.tsx | 38 ++------ components/helper/DynamicStyle.ts | 113 +++++++++++++++++++++++ components/helper/FramerMotionHelper.tsx | 71 ++++++++++++-- components/helper/index.ts | 1 + pages/destination.tsx | 71 +++++++------- 5 files changed, 228 insertions(+), 66 deletions(-) create mode 100644 components/helper/DynamicStyle.ts diff --git a/components/common/Navbar.tsx b/components/common/Navbar.tsx index e7ac75f..b2fbd4d 100644 --- a/components/common/Navbar.tsx +++ b/components/common/Navbar.tsx @@ -12,7 +12,11 @@ import NextLink from "next/link"; import { useRouter } from "next/router"; import React from "react"; import { nav } from "utils"; -import { CustomVariants } from "@/components/helper"; +import { + CustomVariants, + _afterUnderlineStyle, + _sxHoverAfterUnderlineStyle, +} from "@/components/helper"; const svgVariants: CustomVariants = { hidden: { @@ -77,14 +81,13 @@ export const Navbar = ({}: NavbarProps) => {
@@ -101,27 +104,6 @@ export const Navbar = ({}: NavbarProps) => { -
))} + * ``` + * + * * To display animation, use `:hover:after` with `_sxHoverAfterUnderlineStyle`. See below. + * + * --- + * * Basic usage + * @example + * ```jsx + * _after={_afterUnderlineStyle(your_condition)} + * ``` + * * Extend/Override style. If overrideStyle don't work, try to use `!important` + * @example + * ```jsx + * _after={_afterUnderlineStyle(your_condition, { + * transition: "transform 1s ease-in-out !important", + * })} + * ``` + * + * * Animation + * @example + * ```jsx + * _after={_afterUnderlineStyle(your_condition)} + * sx={{ + * "&:hover:after": _sxHoverAfterUnderlineStyle() + * }} + * ``` + */ +export function _afterUnderlineStyle( + condition: boolean, + overrideStyle?: CSSObject +) { + const baseStyle: CSSObject = { + content: `""`, + width: "100%", + height: "2px", + position: "absolute", + bottom: "0", + overflow: "hidden", + transition: "transform 275ms ease", + }; + const conditionStyle: CSSObject = condition + ? { + // active state + opacity: "1", + backgroundColor: nav._bordorColor?.active, + transform: "scaleX(1)", + } + : { + // hover state + opacity: "0.5", + backgroundColor: nav._bordorColor?.hover, + transform: "scaleX(0)", + }; + + return Object.assign(baseStyle, conditionStyle, overrideStyle); +} + +/** + * @description Animation for `_afterUnderlineStyle()` + * @returns CSSObject + * + * --- + * + * * Basic usage + * @example + * ```jsx + * _after={_afterUnderlineStyle(your_condition)} + * sx={{ + * "&:hover:after": _sxHoverAfterUnderlineStyle() + * }} + * ``` + * + * * Extend/Override style. If overrideStyle don't work, try to use `!important` + * @example + * ```jsx + * "&:hover:after": _sxHoverAfterUnderlineStyle({ + * transform: "unset", + transformOrigin: "0% 50% !important", + * }) + * ``` + * + * --- + * + * Animation example + * @see https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border + */ +export function _sxHoverAfterUnderlineStyle(overrideStyle?: CSSObject) { + const baseStyle = { + backgroundColor: nav._bordorColor?.hover, + transform: "scaleX(1) !important", + mixBlendMode: "normal", + opacity: "0.5", + }; + + return Object.assign(baseStyle, overrideStyle); +} diff --git a/components/helper/FramerMotionHelper.tsx b/components/helper/FramerMotionHelper.tsx index f5d2d33..7598513 100644 --- a/components/helper/FramerMotionHelper.tsx +++ b/components/helper/FramerMotionHelper.tsx @@ -1,5 +1,12 @@ -import { Box, BoxProps, Center, CenterProps, Tab, TabProps } from "@chakra-ui/react"; -import { motion, HTMLMotionProps } from "framer-motion"; +import { + Box, + BoxProps, + Center, + CenterProps, + Tab, + TabProps, +} from "@chakra-ui/react"; +import { motion, HTMLMotionProps, Variants, Variant } from "framer-motion"; import NextImage, { ImageProps as NextImageProps } from "next/image"; type Merge = Omit & T; @@ -18,8 +25,60 @@ export const TabMotion: React.FC = motion(Tab); // export const NextImageMotion: React.FC = motion(NextImage); export const NextImageMotion = motion(NextImage); -export interface CustomVariants { - hidden?: object; - visible?: object; - whileHover?: object; +/** + * @description Strengthen _framer-motion_ `Variants, Variant` type + * @example + * ```jsx + * const boxVariants: CustomVariantsProps = { + * // syntax --> key_name: { properties } + * hidden: { transform: "translateY(25%)", opacity: 0 }, + * visible: { + * transform: "translateY(0%)", + * opacity: 1, + * transition: { duration: 1.5, ease: "linear" }, + * }, + * }; + * ``` + */ +export interface CustomVariantsProps { + [key: string]: Variant | any; +} + +/** + * @description Use to create Rotate with Zoom animation + * + * * Defining + * @example + * ```jsx + * const planetVariant: RotateWithZoomVariantProps = { + * visible: { + * rotate: [0, 360], + * transition: { duration: 60, ease: "linear", repeat: Infinity }, // for rotate + * }, + * hover: { + * scale: 1.1, + * }, + * // for hover + * hoverTransition: { + * duration: 0.6, + * ease: "easeOut", + * }, + * }; + * ``` + * + * * Usage + * @example + * ```jsx + * + * ``` + */ +export interface RotateWithZoomVariantProps extends CustomVariantsProps { + visible: Variant; + hover: Variant; + hoverTransition: Variant | any; } diff --git a/components/helper/index.ts b/components/helper/index.ts index cfdf6a5..68bea04 100644 --- a/components/helper/index.ts +++ b/components/helper/index.ts @@ -1,2 +1,3 @@ export * from "./NextLinkHelper" export * from "./FramerMotionHelper" +export * from "./DynamicStyle" diff --git a/pages/destination.tsx b/pages/destination.tsx index 677bb1b..4bddf4e 100644 --- a/pages/destination.tsx +++ b/pages/destination.tsx @@ -17,12 +17,14 @@ import { h1, h2, h4, h5, nav, listSubH1, listSubH2 } from "utils"; import { BoxMotion, CenterMotion, - CustomVariants, + CustomVariantsProps, + RotateWithZoomVariantProps, TabMotion, + _afterUnderlineStyle, + _sxHoverAfterUnderlineStyle, } from "@/components/helper"; import NextImage from "next/image"; import { motion } from "framer-motion"; -import { useRouter } from "next/router"; import React from "react"; // console.log(h5); @@ -58,7 +60,7 @@ const content = [ }, ]; -const boxVariants: CustomVariants = { +const boxVariants: CustomVariantsProps = { hidden: { transform: "translateY(25%)", opacity: 0 }, visible: { transform: "translateY(0%)", @@ -67,8 +69,23 @@ const boxVariants: CustomVariants = { }, }; +const planetVariant: RotateWithZoomVariantProps = { + visible: { + rotate: [0, 360], + transition: { duration: 60, ease: "linear", repeat: Infinity }, // for rotate + }, + hover: { + scale: 1.1, + }, + // for hover + hoverTransition: { + duration: 0.6, + ease: "easeOut", + }, +}; + const Destination: NextPage = () => { - const [CurrentTab, setCurrentTab] = React.useState("moon"); // first load + const [tabIndex, setTabIndex] = React.useState(0); return ( { Pick your destination - - + setTabIndex(index)} + > + {content.map((tab, index) => ( setCurrentTab(tab.name)} - _selected={{ - borderBottom: `2px solid ${nav._bordorColor?.active}`, - }} - _hover={{ - borderBottom: `2px solid ${nav._bordorColor?.active}`, + color={index === tabIndex ? nav.color : "custom.2"} + position="relative" + _after={_afterUnderlineStyle(index === tabIndex)} + sx={{ + "&:hover:after": _sxHoverAfterUnderlineStyle(), }} - // initial={{ - // scaleX: 0, - // }} - // whileHover={{ - // scaleX: 1, - // }} - // transition={{ - // duration: 0.5, - // ease: "easeOut", - // }} > {tab.name} From fac4c51547a3ffcd5582bf76e9375e84db21c289 Mon Sep 17 00:00:00 2001 From: Tan Nguyen Date: Sat, 1 Jan 2022 23:36:22 +0700 Subject: [PATCH 5/5] 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 />