Skip to content

Commit

Permalink
leaderboard designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@stormcloud266
stormcloud266 committed Aug 2, 2024
1 parent 4be882b commit 31fedf6
Showing 1 changed file with 101 additions and 56 deletions.
157 changes: 101 additions & 56 deletions packages/app/features/leaderboard/screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,183 @@
import { Container, Paragraph, XStack, YStack } from '@my/ui'
import { Avatar, Card, H2, H3, LinearGradient, Paragraph, XStack, YStack } from '@my/ui'

const users = [
const usersTest = [
{
rank: 1,
sendTag: '0xUser',
points: 100,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 2,
sendTag: '0xUser1',
points: 90,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 3,
sendTag: '0xUser2',
points: 80,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 4,
sendTag: '0xUser3',
points: 70,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 5,
sendTag: '0xUser4',
points: 60,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 6,
sendTag: '0xUser5',
points: 50,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 7,
sendTag: '0xUser6',
points: 40,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 8,
sendTag: '0xUser7',
points: 30,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 9,
sendTag: '0xUser8',
points: 20,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
{
rank: 10,
sendTag: '0xUser9',
points: 10,
referralLink: 'send.it/referral/132442314',
},
{
rank: 11,
sendTag: '0xUser10',
points: 5,
referralLink: 'send.it/referral/132442314',
},
{
rank: 12,
sendTag: '0xUser11',
points: 5,
referralLink: 'send.it/referral/132442314',
},
{
rank: 13,
sendTag: '0xUser12',
points: 5,
referralLink: 'send.it/referral/132442314',
referrals: '1m 12s',
sent: '1500 USDC',
},
]

export function LeaderboardScreen() {
return (
<Container>
<YStack f={1} width={'100%'} py="$4" space="$4">
<LeaderboardSection />
<YStack w={'100%'} gap={'$size.3.5'} pb={'$size.2'} $gtMd={{ pt: 0 }} pt={'$size.3.5'}>
<YStack gap={'$size.0.9'}>
<H2 tt={'uppercase'} fontWeight={'900'}>
Best in Class
</H2>
<Paragraph color={'$color10'} size={'$5'}>
Register a Sendtag, maintain the minimum balance, and refer others to rise in the ranks.
</Paragraph>
</YStack>
</Container>
<YStack gap={'$size.1.5'} $gtMd={{ flexDirection: 'row' }}>
<Leaderboard title="Referrals" list={usersTest} />
<Leaderboard title="Transactions" list={usersTest} />
</YStack>
</YStack>
)
}

function LeaderboardSection() {
function Leaderboard({ title, list }) {
const isReferrals = title === 'Referrals'
return (
<YStack gap="$6" p="$8" br="$8" bg="$backgroundStrong">
<LeaderBoardHeader />
<LeaderboardList />
</YStack>
<Card f={1} pb={0}>
<YStack br="$8">
<YStack gap="$size.0.9" p="$5" $gtMd={{ p: '$8', pb: '$size.0.9' }} pb="$size.0.9" br="$8">
<H3 pb={'$size.0.9'} fontWeight={'600'} size={'$7'}>
{title}
</H3>
<LeaderBoardHeader isReferrals={isReferrals} />
<LeaderboardList list={list} isReferrals={isReferrals} />
</YStack>
<LinearGradient
pos="absolute"
w="100%"
h={'$size.9'}
locations={[0, 1]}
colors={['transparent', 'black']}
b={0}
borderBottomRightRadius={'$8'}
borderBottomLeftRadius={'$8'}
/>
</YStack>
</Card>
)
}

function LeaderBoardHeader() {
function LeaderBoardHeader({ isReferrals }) {
return (
<XStack gap="$3" ai="center" jc="center">
<Paragraph w="20%" f={1} mb="0" size="$6" lineHeight="$4" color={'$gray8'}>
Rank
</Paragraph>
<Paragraph w="20%" f={1} mb="0" size="$6" lineHeight="$4" color={'$gray8'} ta="center">
Sendtag
</Paragraph>
<Paragraph w="20%" f={1} mb="0" size="$6" lineHeight="$4" color={'$gray8'} ta="center">
Points
</Paragraph>
<Paragraph w="20%" f={2} mb="0" size="$6" lineHeight="$4" color={'$gray8'} ta="right">
Referral Link
<XStack
gap="$3"
ai="center"
jc="space-between"
borderBottomWidth={2}
borderBottomColor={'$color9'}
pb="$size.0.9"
>
<XStack>
<Paragraph fontFamily={'$mono'} color={'$color10'} tt={'uppercase'} w="$size.3">
#
</Paragraph>
<Paragraph fontFamily={'$mono'} color={'$color10'} tt={'uppercase'}>
Sendtag
</Paragraph>
</XStack>

<Paragraph fontFamily={'$mono'} color={'$color10'} tt={'uppercase'} ta="right">
{isReferrals ? 'Referrals' : 'Total transactions'}
</Paragraph>
</XStack>
)
}

function LeaderboardList() {
return users.map((user) => (
<XStack gap="$3" ai="center" jc={'center'} key={user.sendTag}>
<Paragraph w="20%" f={1} mb="0" size="$6" lineHeight="$4">
{user.rank}
</Paragraph>
<Paragraph w="20%" f={1} mb="0" size="$6" lineHeight="$4" ta="center">
{user.sendTag}
</Paragraph>
<Paragraph w="20%" f={1} mb="0" size="$6" lineHeight="$4" ta="center">
{user.points}
</Paragraph>
<Paragraph w="20%" f={2} mb="0" size="$6" lineHeight="$4" ta="right" color={'$gold8'}>
{user.referralLink}
function LeaderboardList({ list, isReferrals }) {
return list.map((user) => (
<XStack gap={'$size.0.9'} ai="center" jc={'space-between'} key={user.sendTag}>
<XStack gap={'$2'} flexShrink={1}>
<Paragraph mb="0" w="$size.3" lineHeight="$4" color={'$color10'} fontFamily={'$mono'}>
{user.rank}
</Paragraph>
<XStack f={1} gap={'$size.0.9'} ai={'center'}>
<Avatar size="$2" borderRadius={'$3'}>
<Avatar.Image src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80" />
<Avatar.Fallback
backgroundColor={'$decay'}
$theme-light={{ backgroundColor: '$white' }}
/>
</Avatar>
<Paragraph mb="0" lineHeight="$4" color="$primary">
/{user.sendTag}
</Paragraph>
</XStack>
</XStack>

<Paragraph flexShrink={0} ta="right">
{isReferrals ? user.points : user.sent}
</Paragraph>
</XStack>
))
Expand Down

0 comments on commit 31fedf6

Please sign in to comment.