-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 🎸 Add Industry Comparison Section (#427)
* Open branch * feat: 🎸 Add Industry Comparison Section * fix: 🐛 address PR comments * refactor: 💡 address PR comments * docs: ✏️ add descripition for useMousePosition hook * refactor: 💡 remove container ref from useMousePosition * refactor: 💡 add SlidingPanel component and update Cryptopunks * refactor: 💡 dynamic import for framer motion * refactor: 💡 address PR comments * refactor: 💡 conditionally call drawDots to improve performance * style: 💄 remove unused title style * refactor: 💡 remove unused prop dimensions from drawDots * perf: ⚡️ remove mouse hover effect from dot grid animation --------- Co-authored-by: iamacook <[email protected]> Co-authored-by: Diogo Soares <[email protected]>
- Loading branch information
3 people
authored
Aug 20, 2024
1 parent
0d455d3
commit ca43bb3
Showing
15 changed files
with
442 additions
and
158 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { Typography } from '@mui/material' | ||
| import type { BaseBlock } from '@/components/Home/types' | ||
| import type { MotionValue } from 'framer-motion' | ||
| import { motion, useTransform } from 'framer-motion' | ||
| import dynamic from 'next/dynamic' | ||
| import LinksWrapper from '../LinksWrapper' | ||
| import css from './styles.module.css' | ||
| import { useSafeDataRoomStats } from '@/hooks/useSafeDataRoomStats' | ||
| import { useIsMediumScreen } from '@/hooks/useMaxWidth' | ||
|
|
||
| const PunksGrid = dynamic(() => import('./PunksGrid')) | ||
| const SlidingPanel = dynamic(() => import('@/components/common/SlidingPanel')) | ||
|
|
||
| const CRYPTOPUNKS_TOTAL = 10000 | ||
| const CRYPTOPUNKS_PERCENTAGE_STORED_FALLBACK = 0.092 | ||
|
|
||
| const Content = ({ scrollYProgress, title, text, link }: BaseBlock & { scrollYProgress: MotionValue<number> }) => { | ||
| const { cryptoPunksStoredPercentage } = useSafeDataRoomStats() | ||
| const isMobile = useIsMediumScreen() | ||
|
|
||
| const opacityParams = isMobile ? [0.4, 0.45, 0.65, 0.66] : [0.25, 0.35, 0.65, 0.7] | ||
| const opacity = useTransform(scrollYProgress, opacityParams, [0, 1, 1, 0]) | ||
|
|
||
| const percentageValue = cryptoPunksStoredPercentage || CRYPTOPUNKS_PERCENTAGE_STORED_FALLBACK | ||
| // Converts to percentage with 1 decimal place | ||
| const percentageToDisplay = (percentageValue * 100).toFixed(1) + '%' | ||
|
|
||
| const cryptoPunksStored = (percentageValue * CRYPTOPUNKS_TOTAL).toFixed(0) | ||
| const fractionToDisplay = `${cryptoPunksStored}/${CRYPTOPUNKS_TOTAL}` | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className={css.slidingPanelContent} | ||
| style={{ | ||
| opacity, | ||
| }} | ||
| > | ||
| <Typography variant="h2" className={css.text}> | ||
| {text} | ||
| </Typography> | ||
|
|
||
| <Typography variant="h2">{title}</Typography> | ||
|
|
||
| <div className={css.statsContainer}> | ||
| <Typography variant="h1" className={css.percentage}> | ||
| {percentageToDisplay} | ||
| </Typography> | ||
| <Typography variant="h2" className={css.fraction}> | ||
| {fractionToDisplay} | ||
| </Typography> | ||
| </div> | ||
|
|
||
| {link && <LinksWrapper link={link} variant="dark" />} | ||
| </motion.div> | ||
| ) | ||
| } | ||
|
|
||
| export default Content |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { getRandomColor } from '@/components/DataRoom/CryptoPunks/utils/getRandomColor' | ||
| import CryptoPunk from '@/public/images/DataRoom/cryptopunk-silhouette.svg' | ||
| import type { MotionValue } from 'framer-motion' | ||
| import { motion, useTransform } from 'framer-motion' | ||
| import css from './styles.module.css' | ||
|
|
||
| const CRYPTOPUNK_ROWS_NR = 8 | ||
| const CRYPTOPUNK_COLUMNS_NR = 24 | ||
|
|
||
| const PunksGrid = ({ scrollYProgress, isMobile }: { scrollYProgress: MotionValue<number>; isMobile: boolean }) => { | ||
| const translateParams = isMobile ? [0, 1] : [0.25, 0.75] | ||
| const opacity = useTransform(scrollYProgress, [0, 0.25, 0.7, 0.75], [0, 1, 1, 0]) | ||
| const translateLTR = useTransform(scrollYProgress, translateParams, ['-50%', '0%']) | ||
| const translateRTL = useTransform(scrollYProgress, translateParams, ['0%', '-50%']) | ||
|
|
||
| const translateDirection = (index: number) => (index % 2 === 1 ? translateLTR : translateRTL) | ||
|
|
||
| return ( | ||
| <motion.div | ||
| style={{ | ||
| opacity, | ||
| }} | ||
| className={css.punksGrid} | ||
| > | ||
| {Array.from({ length: CRYPTOPUNK_ROWS_NR }).map((_, outerIndex) => ( | ||
| <motion.div | ||
| style={{ translateX: translateDirection(outerIndex) }} | ||
| className={css.cryptoPunkColumns} | ||
| key={outerIndex} | ||
| > | ||
| {Array.from({ length: CRYPTOPUNK_COLUMNS_NR }).map((_, innerIndex) => ( | ||
| <motion.div | ||
| key={innerIndex} | ||
| initial={{ opacity: 0, scale: 0.5 }} | ||
| whileInView={{ opacity: 1, scale: 1 }} | ||
| transition={{ | ||
| duration: 0.3, | ||
| }} | ||
| style={{ | ||
| transformOrigin: 'center', | ||
| color: getRandomColor(), | ||
| }} | ||
| > | ||
| <CryptoPunk className={css.cryptopunk} /> | ||
| </motion.div> | ||
| ))} | ||
| </motion.div> | ||
| ))} | ||
| </motion.div> | ||
| ) | ||
| } | ||
|
|
||
| export default PunksGrid |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import type { BaseBlock } from '@/components/Home/types' | ||
| import { Typography } from '@mui/material' | ||
| import type { MotionValue } from 'framer-motion' | ||
| import { motion, useTransform } from 'framer-motion' | ||
| import DotGrid from './DotGrid' | ||
| import css from './styles.module.css' | ||
| import { useIsMediumScreen } from '@/hooks/useMaxWidth' | ||
| import type { RefObject } from 'react' | ||
|
|
||
| const Content = ({ | ||
| scrollYProgress, | ||
| title, | ||
| containerRef, | ||
| }: { | ||
| title: BaseBlock['title'] | ||
| scrollYProgress: MotionValue<number> | ||
| containerRef: RefObject<HTMLDivElement> | ||
| }) => { | ||
| const isMobile = useIsMediumScreen() | ||
|
|
||
| const scrollParams = [0.25, 0.35, 0.65, 0.75] | ||
| const opacityParams = [0, 1, 1, 0] | ||
| const opacity = useTransform(scrollYProgress, scrollParams, opacityParams) | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className={css.slidingPanelContent} | ||
| style={{ | ||
| opacity: isMobile ? 1 : opacity, | ||
| }} | ||
| > | ||
| <Typography variant="h1">{title}</Typography> | ||
| <DotGrid containerRef={containerRef} /> | ||
| </motion.div> | ||
| ) | ||
| } | ||
|
|
||
| export default Content |
Oops, something went wrong.