Created
October 2, 2023 18:31
-
-
Save Konard/d1ba58a95fa2b71462f8393f55c9b67d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async ({ deep, require }) => { | |
| const React = require('react'); | |
| const { Box, Img, Text, useColorMode } = require('@chakra-ui/react'); | |
| const { useDebounceCallback } = require('@react-hook/debounce'); | |
| const { AnimatePresence, useAnimation, motion, useInView, useMotionValue, useSpring, useTransform, useIsPresent } = require('framer-motion'); | |
| const { useEffect, useRef, useState } = require('react'); | |
| const { ClientHandler } = require('@deep-foundation/deepcase'); | |
| const variantTitleSide = { | |
| show: { | |
| opacity: 1, | |
| scale: 1, | |
| display: 'flex', | |
| transition: { | |
| type: 'spring', | |
| delay: 0.35, | |
| display: { | |
| delay: 0.3 | |
| } | |
| } | |
| }, | |
| hide: { | |
| opacity: 0, | |
| scale: 0.3, | |
| display: 'none', | |
| transition: { | |
| type: 'spring', | |
| display: { | |
| delay: 0.2 | |
| } | |
| } | |
| } | |
| } | |
| const variantDescSide = { | |
| show: { | |
| opacity: 1, | |
| scale: 1, | |
| display: 'flex', | |
| transition: { | |
| type: 'spring', | |
| delay: 0.35, | |
| display: { | |
| delay: 0.3 | |
| } | |
| } | |
| }, | |
| hide: { | |
| opacity: 0, | |
| scale: 0.3, | |
| display: 'none', | |
| transition: { | |
| type: 'spring', | |
| display: { | |
| delay: 0.2 | |
| } | |
| } | |
| } | |
| } | |
| const logo_blue = await deep.id('@deep-foundation/site', 'logo_blue'); | |
| function DeepFlag({ | |
| blockWidth = 19, | |
| blockHeight = 19, | |
| onTapButton, | |
| subtitle, | |
| title, | |
| description, | |
| ...props | |
| }:{ | |
| blockWidth?: number; | |
| blockHeight?: number; | |
| onTapButton?: () => any; | |
| subtitle: string; | |
| title: string; | |
| description: string; | |
| [key:string]: any; | |
| }) { | |
| const [revert, setRevert] = useState(true); | |
| const viewRef = useRef<any>(); | |
| const isPresent = useIsPresent(); | |
| const animation1 = useAnimation(); | |
| const animation2 = useAnimation(); | |
| useEffect(() => { | |
| if (revert === true) { | |
| animation1.start('show'); | |
| animation2.start('hide'); | |
| } else { | |
| animation1.start('hide'); | |
| animation2.start('show'); | |
| } | |
| }, [revert, animation1, animation2]); | |
| const isInView = useInView(viewRef); | |
| const {colorMode} = useColorMode(); | |
| return (<Box | |
| // as={motion.div} | |
| // ref={viewRef} | |
| sx={{ | |
| // width: `${blockWidth}rem`, | |
| // height: `${blockHeight}rem`, | |
| width: 300, | |
| height: 300, | |
| position: 'relative', | |
| borderRadius: '1.375rem', | |
| overflow: 'hidden', | |
| bg: 'transparent', | |
| p: '3rem 4rem', | |
| }} | |
| > | |
| <AnimatePresence> | |
| <Box | |
| width='100%' | |
| height='100%' | |
| as={motion.div} | |
| animate={animation2} | |
| exit='hide' | |
| initial='hide' | |
| flexFlow='column' | |
| variants={variantDescSide} | |
| onTap={() => { | |
| setRevert(!revert); | |
| console.log('tap', revert); | |
| }} | |
| sx={{ | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| }} | |
| > | |
| <Text align='center' textStyle='Regular20' mb='1.5rem'>{description}</Text> | |
| {colorMode === 'light' ? <Img src='/logo_gold.svg' /> | |
| : <Img src={`https://deep.deep.foundation/api/file?linkId=${logo_blue}`} />} | |
| </Box> | |
| </AnimatePresence> | |
| <AnimatePresence> | |
| <Box | |
| width='100%' | |
| height='100%' | |
| as={motion.div} | |
| exit='hide' | |
| initial='show' | |
| animate={animation1} | |
| variants={variantTitleSide} | |
| onTap={() => setRevert(!revert)} | |
| sx={{ | |
| flexDirection: 'column', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| '&>*:nth-of-type(2)': { | |
| mb: '1rem', | |
| } | |
| }} | |
| > | |
| <Text align='center' textStyle='Medium20'>{title}</Text> | |
| <Text align='center' textStyle='Regular20'>{subtitle}</Text> | |
| {/* image here */} | |
| <Box | |
| backgroundImage={'url(/images/flag.svg)'} | |
| sx={{ | |
| width: `${blockWidth / 2.5}rem`, | |
| height: `${blockHeight / 2.5}rem` | |
| }} | |
| bgSize='cover' | |
| bgRepeat='no-repeat' | |
| bgPosition='center' | |
| bgColor='red' | |
| /> | |
| </Box> | |
| </AnimatePresence> | |
| </Box> | |
| ) | |
| }; | |
| const FrameMouseShiftHandlerId = await deep.id('@deep-foundation/site', 'FrameMouseShiftHandler'); | |
| const themeHandlerId = await deep.id('@deep-foundation/site', 'themeHandler'); | |
| return () => { | |
| // <DeepFlag | |
| // title='Deep Foundation' | |
| // subtitle='A new way to build' | |
| // description='Blurring the line between your desktop and your mind-space' | |
| // /> | |
| // <DeepFrameMouseShift> | |
| // </DeepFrameMouseShift> | |
| return ( | |
| <ClientHandler handlerId={themeHandlerId}> | |
| <ClientHandler handlerId={FrameMouseShiftHandlerId}> | |
| <DeepFlag | |
| title='Deep Foundation' | |
| subtitle='A new way to build' | |
| description='Blurring the line between your desktop and your mind-space' | |
| /> | |
| </ClientHandler> | |
| </ClientHandler> | |
| ); | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment