Skip to content

Commit

Permalink
feat: add tilt effect
Browse files Browse the repository at this point in the history
  • Loading branch information
@sajald77
sajald77 committed Nov 19, 2024
1 parent aa8fe7b commit ecc553a
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 75 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
"react-icons": "^5.2.1",
"react-jss": "^10.9.2",
"react-otp-input": "^3.1.1",
"react-parallax-tilt": "^1.7.257",
"react-player": "^2.16.0",
"react-qr-code": "^2.0.11",
"react-qrcode-logo": "^3.0.0",
Expand Down
152 changes: 77 additions & 75 deletions src/modules/profile/pages/profilePage/views/account/views/HeroCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Avatar, Box, forwardRef, VStack } from '@chakra-ui/react'
import { t } from 'i18next'
import { useEffect, useState } from 'react'
import Tilt from 'react-parallax-tilt'

import { getBlockHeight } from '@/api'
import { Body } from '@/shared/components/typography'
Expand All @@ -17,7 +18,6 @@ import { fonts, lightModeColors } from '@/shared/styles'

import { UserForProfilePageFragment, UserHeroStats } from '../../../../../../../types'
import { commaFormatted, getShortAmountLabel, toInt } from '../../../../../../../utils'

const DEFAULT_BLOCK_HEIGHT = 800345

const heroBackgroundMap = {
Expand Down Expand Up @@ -89,88 +89,90 @@ export const HeroCard = forwardRef(
}, [])

return (
<VStack
ref={ref}
w="330px"
h="430px"
py={10}
position="relative"
backgroundImage={`url(${getHeroBackground()})`}
backgroundSize="contain"
backgroundPosition="center"
backgroundRepeat="no-repeat"
color="blackAlpha.800"
justifyContent={'space-between'}
fontFamily={fonts.hubotSans}
>
<Body
as="span"
position="absolute"
top={'7px'}
backgroundColor="transparent"
color="white"
paddingX="2"
fontSize="xs"
<Tilt glareEnable glareMaxOpacity={0.3} tiltMaxAngleX={10} tiltMaxAngleY={10}>
<VStack
ref={ref}
w="330px"
h="430px"
py={10}
position="relative"
backgroundImage={`url(${getHeroBackground()})`}
backgroundSize="contain"
backgroundPosition="center"
backgroundRepeat="no-repeat"
color="blackAlpha.800"
justifyContent={'space-between'}
fontFamily={fonts.hubotSans}
>
{`Block: ${commaFormatted(blockHeight)}`}
</Body>
<VStack>
<VStack spacing="0" mt={4}>
{/* User info */}
<Box w="80px" h="80px" borderRadius="full" overflow="hidden">
<Avatar src={user?.imageUrl || ''} w="100%" h="100%" objectFit="cover" />
</Box>
<Body fontSize="2xl" fontWeight="bold" color={lightModeColors.neutralAlpha[11]}>
{user?.username || 'Anonymous Hero'}
</Body>
</VStack>
</VStack>

{/* Stats */}
<VStack spacing={4} align="stretch" alignItems="center" alignContent="center">
<VStack spacing={0} w="full">
<Body fontSize="lg" color={lightModeColors.neutralAlpha[11]}>
{t('Contributor Ranking')}:{' '}
<Body as="span" color={lightModeColors.neutralAlpha[12]}>
{contributorRank}
<Body
as="span"
position="absolute"
top={'7px'}
backgroundColor="transparent"
color="white"
paddingX="2"
fontSize="xs"
>
{`Block: ${commaFormatted(blockHeight)}`}
</Body>
<VStack>
<VStack spacing="0" mt={4}>
{/* User info */}
<Box w="80px" h="80px" borderRadius="full" overflow="hidden">
<Avatar src={user?.imageUrl || ''} w="100%" h="100%" objectFit="cover" />
</Box>
<Body fontSize="2xl" fontWeight="bold" color={lightModeColors.neutralAlpha[11]}>
{user?.username || 'Anonymous Hero'}
</Body>
</Body>
<Body fontSize="sm" color={lightModeColors.neutralAlpha[9]}>
Contributed {getShortAmountLabel(stats.contributorStats.contributionsTotal)} sats ($
{getShortAmountLabel(Math.round(stats.contributorStats.contributionsTotalUsd))}) to{' '}
{stats.contributorStats.projectsCount} projects
</Body>
</VStack>
</VStack>

<VStack spacing={0} w="full">
<Body fontSize="lg" color={lightModeColors.neutralAlpha[11]}>
{t('Ambassador Ranking')}:{' '}
<Body as="span" color={lightModeColors.neutralAlpha[12]}>
{amabassadorRank}
{/* Stats */}
<VStack spacing={4} align="stretch" alignItems="center" alignContent="center">
<VStack spacing={0} w="full">
<Body fontSize="lg" color={lightModeColors.neutralAlpha[11]}>
{t('Contributor Ranking')}:{' '}
<Body as="span" color={lightModeColors.neutralAlpha[12]}>
{contributorRank}
</Body>
</Body>
</Body>
<Body fontSize="sm" color={lightModeColors.neutralAlpha[9]}>
Enabled {getShortAmountLabel(stats.ambassadorStats.contributionsTotal)} sats ($
{getShortAmountLabel(Math.round(stats.ambassadorStats.contributionsTotalUsd))}) to{' '}
{stats.ambassadorStats.projectsCount} projects
</Body>
</VStack>

<VStack spacing={0} w="full">
<Body fontSize="lg" color={lightModeColors.neutralAlpha[11]}>
{t('Creator Ranking')}:{' '}
<Body as="span" color={lightModeColors.neutralAlpha[12]}>
{creatorRank}
<Body fontSize="sm" color={lightModeColors.neutralAlpha[9]}>
Contributed {getShortAmountLabel(stats.contributorStats.contributionsTotal)} sats ($
{getShortAmountLabel(Math.round(stats.contributorStats.contributionsTotalUsd))}) to{' '}
{stats.contributorStats.projectsCount} projects
</Body>
</VStack>

<VStack spacing={0} w="full">
<Body fontSize="lg" color={lightModeColors.neutralAlpha[11]}>
{t('Ambassador Ranking')}:{' '}
<Body as="span" color={lightModeColors.neutralAlpha[12]}>
{amabassadorRank}
</Body>
</Body>
<Body fontSize="sm" color={lightModeColors.neutralAlpha[9]}>
Enabled {getShortAmountLabel(stats.ambassadorStats.contributionsTotal)} sats ($
{getShortAmountLabel(Math.round(stats.ambassadorStats.contributionsTotalUsd))}) to{' '}
{stats.ambassadorStats.projectsCount} projects
</Body>
</VStack>

<VStack spacing={0} w="full">
<Body fontSize="lg" color={lightModeColors.neutralAlpha[11]}>
{t('Creator Ranking')}:{' '}
<Body as="span" color={lightModeColors.neutralAlpha[12]}>
{creatorRank}
</Body>
</Body>
<Body fontSize="sm" color={lightModeColors.neutralAlpha[9]}>
Raised {getShortAmountLabel(stats.creatorStats.contributionsTotal)} sats ($
{getShortAmountLabel(Math.round(stats.creatorStats.contributionsTotalUsd))}) to{' '}
{stats.creatorStats.projectsCount} projects
</Body>
</Body>
<Body fontSize="sm" color={lightModeColors.neutralAlpha[9]}>
Raised {getShortAmountLabel(stats.creatorStats.contributionsTotal)} sats ($
{getShortAmountLabel(Math.round(stats.creatorStats.contributionsTotalUsd))}) to{' '}
{stats.creatorStats.projectsCount} projects
</Body>
</VStack>
</VStack>
</VStack>
</VStack>
</Tilt>
)
},
)
11 changes: 11 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13740,6 +13740,7 @@ __metadata:
react-icons: "npm:^5.2.1"
react-jss: "npm:^10.9.2"
react-otp-input: "npm:^3.1.1"
react-parallax-tilt: "npm:^1.7.257"
react-player: "npm:^2.16.0"
react-qr-code: "npm:^2.0.11"
react-qrcode-logo: "npm:^3.0.0"
Expand Down Expand Up @@ -18652,6 +18653,16 @@ __metadata:
languageName: node
linkType: hard

"react-parallax-tilt@npm:^1.7.257":
version: 1.7.257
resolution: "react-parallax-tilt@npm:1.7.257"
peerDependencies:
react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
checksum: 10c0/c6c2c59581a06c313965516622f09b56f50d9205a604d67cac038e8f7fa77a1428249884d559b9b4e17e7d0a551e0320bc4fd8737dc724d01f2821c61a3a216e
languageName: node
linkType: hard

"react-player@npm:^2.16.0":
version: 2.16.0
resolution: "react-player@npm:2.16.0"
Expand Down

0 comments on commit ecc553a

Please sign in to comment.