Skip to content

Commit 0572d6a

Browse files
youngkidwarrioryoungkidwarrior
committed
Create a styled component for home cards
1 parent f37f95e commit 0572d6a

File tree

5 files changed

+60
-57
lines changed

5 files changed

+60
-57
lines changed

‎packages/app/features/home/FriendsCard.tsx

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1-
import { Avatar, Card, type CardProps, Paragraph, Spinner, XStack, type XStackProps } from '@my/ui'
1+
import {
2+
Avatar,
3+
Card,
4+
type CardProps,
5+
Paragraph,
6+
Spinner,
7+
ThemeableStack,
8+
XStack,
9+
type XStackProps,
10+
} from '@my/ui'
211

312
import { ChevronRight } from '@tamagui/lucide-icons'
413
import { type LinkProps, useLink } from 'solito/link'
514
import { useFriends } from '../affiliate/utils/useFriends'
615
import { IconAccount } from 'app/components/icons'
16+
import { HomeBodyCard } from './screen'
717

818
export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
919
const linkProps = useLink({ href })
1020

1121
return (
12-
<Card
13-
elevation={'$0.75'}
14-
hoverStyle={{ scale: 0.925 }}
15-
pressStyle={{ scale: 0.875 }}
16-
animation="bouncy"
17-
size={'$5'}
18-
br="$7"
19-
{...linkProps}
20-
{...props}
21-
>
22+
<HomeBodyCard {...linkProps} {...props}>
2223
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
2324
<Paragraph fontSize={'$5'} fontWeight="400">
2425
Friends
@@ -33,7 +34,7 @@ export const FriendsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
3334
<Card.Footer padded fd="column" gap="$2">
3435
<FriendsPreview />
3536
</Card.Footer>
36-
</Card>
37+
</HomeBodyCard>
3738
)
3839
}
3940

@@ -52,11 +53,20 @@ function FriendsPreview({ limit = 3 }: { limit?: number }) {
5253
return (
5354
<XStack ai="center" jc="space-between">
5455
<OverlappingFriendAvatars friends={filledFriends} />
55-
<Card circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5" mih={0} miw={0}>
56+
<ThemeableStack
57+
circular
58+
ai="center"
59+
jc="center"
60+
bc="$color0"
61+
w={'$3.5'}
62+
h="$3.5"
63+
mih={0}
64+
miw={0}
65+
>
5666
<Paragraph fontSize={'$4'} fontWeight="500">
5767
{`${data?.count ?? 0}`}
5868
</Paragraph>
59-
</Card>
69+
</ThemeableStack>
6070
</XStack>
6171
)
6272
}

‎packages/app/features/home/InvestmentsBalanceCard.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
Card,
33
type CardProps,
4-
H1,
54
Paragraph,
65
Spinner,
76
Theme,
@@ -25,6 +24,7 @@ import { useMemo } from 'react'
2524
import { IconCoin, IconError } from 'app/components/icons'
2625
import { useCoins } from 'app/provider/coins'
2726
import { investmentCoins as investmentCoinsList } from 'app/data/coins'
27+
import { HomeBodyCard } from './screen'
2828

2929
export const InvestmentsBalanceCard = (props: CardProps) => {
3030
const media = useMedia()
@@ -52,16 +52,7 @@ export const InvestmentsBalanceCard = (props: CardProps) => {
5252
const formattedBalance = formatAmount(dollarTotal, 9, 0)
5353

5454
return (
55-
<Card
56-
elevation={'$0.75'}
57-
hoverStyle={{ scale: 0.925 }}
58-
pressStyle={{ scale: 0.875 }}
59-
animation="bouncy"
60-
onPress={toggleSubScreen}
61-
size={'$5'}
62-
br="$7"
63-
{...props}
64-
>
55+
<HomeBodyCard onPress={toggleSubScreen} {...props}>
6556
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
6657
<Paragraph fontSize={'$5'} fontWeight="400">
6758
Invest
@@ -102,7 +93,7 @@ export const InvestmentsBalanceCard = (props: CardProps) => {
10293
<InvestmentsPreview />
10394
)}
10495
</Card.Footer>
105-
</Card>
96+
</HomeBodyCard>
10697
)
10798
}
10899

@@ -125,11 +116,20 @@ function InvestmentsPreview() {
125116
return (
126117
<XStack ai="center" jc="space-between">
127118
<OverlappingCoinIcons coins={sortedByBalance} />
128-
<Card circular ai="center" jc="center" bc="$color0" w={'$3.5'} h="$3.5" mih={0} miw={0}>
119+
<ThemeableStack
120+
circular
121+
ai="center"
122+
jc="center"
123+
bc="$color0"
124+
w={'$3.5'}
125+
h="$3.5"
126+
mih={0}
127+
miw={0}
128+
>
129129
<Paragraph fontSize={'$4'} fontWeight="500">
130130
{`+${investmentCoinsList.length - 3}`}
131131
</Paragraph>
132-
</Card>
132+
</ThemeableStack>
133133
</XStack>
134134
)
135135
}

‎packages/app/features/home/RewardsCard.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Card, type CardProps, H1, Paragraph, Spinner, XStack } from '@my/ui'
1+
import { Card, type CardProps, Paragraph, Spinner, XStack } from '@my/ui'
22
import formatAmount from 'app/utils/formatAmount'
33
import { ChevronRight } from '@tamagui/lucide-icons'
44
import { useMemo } from 'react'
@@ -11,6 +11,7 @@ import { useQuery } from '@tanstack/react-query'
1111
import { useTokenPrices } from 'app/utils/useTokenPrices'
1212
import { baseMainnetClient, sendTokenAddress } from '@my/wagmi'
1313
import { coinsDict } from 'app/data/coins'
14+
import { HomeBodyCard } from './screen'
1415

1516
export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
1617
const linkProps = useLink({ href })
@@ -31,16 +32,7 @@ export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
3132
const isLoading = isPricesLoading || isDistributionLoading
3233

3334
return (
34-
<Card
35-
elevation={'$0.75'}
36-
hoverStyle={{ scale: 0.925 }}
37-
pressStyle={{ scale: 0.875 }}
38-
animation="bouncy"
39-
size={'$5'}
40-
br="$7"
41-
{...linkProps}
42-
{...props}
43-
>
35+
<HomeBodyCard {...linkProps} {...props}>
4436
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
4537
<Paragraph fontSize={'$5'} fontWeight="400">
4638
Rewards
@@ -66,7 +58,7 @@ export const RewardsCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'chi
6658
})()}
6759
</Paragraph>
6860
</Card.Footer>
69-
</Card>
61+
</HomeBodyCard>
7062
)
7163
}
7264

‎packages/app/features/home/SavingsBalanceCard.tsx

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useSendEarnBalances, useVaultConvertSharesToAssets } from '../earn/hook
77
import { useIsPriceHidden } from './utils/useIsPriceHidden'
88
import { formatUnits } from 'viem'
99
import { type LinkProps, useLink } from 'solito/link'
10+
import { HomeBodyCard } from './screen'
1011

1112
export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProps, 'children'>) => {
1213
const linkProps = useLink({ href })
@@ -32,16 +33,7 @@ export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProp
3233
)
3334

3435
return (
35-
<Card
36-
elevation={'$0.75'}
37-
hoverStyle={{ scale: 0.925 }}
38-
pressStyle={{ scale: 0.875 }}
39-
animation="bouncy"
40-
size={'$5'}
41-
br="$7"
42-
{...linkProps}
43-
{...props}
44-
>
36+
<HomeBodyCard {...linkProps} {...props}>
4537
<Card.Header padded pb={0} fd="row" ai="center" jc="space-between">
4638
<Paragraph fontSize={'$5'} fontWeight="400">
4739
Save
@@ -67,7 +59,7 @@ export const SavingsBalanceCard = ({ href, ...props }: Omit<CardProps & LinkProp
6759
})()}
6860
</Paragraph>
6961
</Card.Footer>
70-
</Card>
62+
</HomeBodyCard>
7163
)
7264
}
7365

‎packages/app/features/home/screen.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Paragraph,
77
Spinner,
88
Stack,
9+
styled,
910
useMedia,
1011
XStack,
1112
type XStackProps,
@@ -120,12 +121,12 @@ function HomeBody(props: XStackProps) {
120121
>
121122
<StablesBalanceCard />
122123
<XStack gap="$3.5" w="100%" mih={136} jc={'center'}>
123-
<SavingsBalanceCard href="/earn" maw="50%" f={1} />
124-
<InvestmentsBalanceCard maw="50%" f={1} />
124+
<SavingsBalanceCard href="/earn" />
125+
<InvestmentsBalanceCard />
125126
</XStack>
126127
<XStack gap="$3.5" w="100%" mih={136} jc={'center'}>
127-
<RewardsCard href="/explore/rewards" maw="50%" f={1} />
128-
<FriendsCard href="/account/affiliate" maw="50%" f={1} />
128+
<RewardsCard href="/explore/rewards" />
129+
<FriendsCard href="/account/affiliate" />
129130
</XStack>
130131
</YStack>
131132
{(() => {
@@ -155,7 +156,6 @@ function InvestmentsBody() {
155156
<YStack ai="center" $gtXs={{ gap: '$3' }} gap={'$3.5'} f={1}>
156157
{media.lg && <InvestmentsBalanceCard />}
157158
<Card
158-
elevation={'$0.75'}
159159
bc={'$color1'}
160160
width="100%"
161161
p="$2"
@@ -211,7 +211,6 @@ function StablesBody() {
211211
{media.lg && <StablesBalanceCard />}
212212

213213
<Card
214-
elevation={'$0.75'}
215214
bc={'$color1'}
216215
width="100%"
217216
$gtSm={{
@@ -223,3 +222,13 @@ function StablesBody() {
223222
</YStack>
224223
)
225224
}
225+
226+
export const HomeBodyCard = styled(Card, {
227+
hoverStyle: { scale: 0.925 },
228+
pressStyle: { scale: 0.875 },
229+
animation: 'bouncy',
230+
size: '$5',
231+
br: '$7',
232+
f: 1,
233+
maw: '50%',
234+
})

0 commit comments

Comments
 (0)