status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

update ContextTag (#468) 

* u Avatar

* u Context Tag

* add changeset

* revert type

* Revert "revert type"

This reverts commit 1d099cf5d2.

* add bigger 24

* c

* f

* f textSize
This commit is contained in:
Felicio Mununga 2023-09-11 12:26:24 +02:00 committed by GitHub
parent 5dc7997dc5
commit 7c96decfc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 755 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/few-coins-notice.md Normal file
View File

@ -0,0 +1,5 @@
---
'@status-im/components': patch
---
update Context Tag

7
packages/components/src/avatar/avatar.tsx
View File

@ -51,7 +51,7 @@ type ChannelAvatarProps = {
type CommunityAvatarProps = {
type: 'community'
size: 80 | 32 | 28 | 24 | 20
size: 80 | 32 | 28 | 24 | 20 | 16
name: string
src?: string
backgroundColor?: ColorTokens
@ -59,7 +59,7 @@ type CommunityAvatarProps = {
type AccountAvatarProps = {
type: 'account'
size: 80 | 48 | 32 | 28 | 24 | 20
size: 80 | 48 | 32 | 28 | 24 | 20 | 16
name: string
src?: string
backgroundColor?: ColorTokens
@ -67,7 +67,7 @@ type AccountAvatarProps = {
type IconAvatarProps = {
type: 'icon'
size: 48 | 32 | 28 | 24 | 20
size: 48 | 32 | 28 | 24 | 20 | 16
icon: React.ReactElement
backgroundColor?: ColorTokens
color?: ColorTokens
@ -102,6 +102,7 @@ const accountRadiusSizes: Record<AccountAvatarProps['size'], RadiusTokens> = {
'28': '$8',
'24': '$8',
'20': '$6',
'16': '$6',
}
const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> =

662
packages/components/src/context-tag/context-tag.stories.tsx
View File

@ -9,7 +9,7 @@ const meta: Meta<typeof ContextTag> = {
component: ContextTag,
argTypes: {
type: [
'default',
'user',
'account',
'group',
'community',
@ -29,10 +29,10 @@ const meta: Meta<typeof ContextTag> = {
type Story = StoryObj<typeof ContextTag>
export const Default: Story = {
export const user: Story = {
args: {
type: 'account',
user: { name: 'user name ', emoji: '🐷' },
account: { name: 'user name ', emoji: '🐷' },
size: 24,
outline: false,
blur: false,
@ -43,15 +43,92 @@ export const AllVariants: Story = {
args: {},
render: () => (
<Stack space flexDirection="row">
<Stack space flexDirection="column" alignItems="flex-start">
<Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={20}
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={20}
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={20}
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
/>
<ContextTag type="address" address="0x045...1ah" size={20} />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={20}
/>
<ContextTag type="audio" audioLength="00:32" size={20} />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
/>
<ContextTag
type="group"
@ -60,6 +137,7 @@ export const AllVariants: Story = {
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={13}
/>
<ContextTag
type="channel"
@ -69,6 +147,7 @@ export const AllVariants: Story = {
name: 'channel',
}}
size={24}
textSize={13}
/>
<ContextTag
type="community"
@ -77,6 +156,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
/>
<ContextTag
type="token"
@ -85,6 +165,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
/>
<ContextTag
type="network"
@ -93,14 +174,16 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
/>
<ContextTag
type="account"
user={{
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={13}
/>
<ContextTag
type="collectible"
@ -109,20 +192,127 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={13}
/>
<ContextTag type="address" address="0x045...1ah" size={24} />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={13}
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={13}
/>
<ContextTag type="audio" audioLength="00:32" size={24} />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={15}
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
textSize={15}
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={15}
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={15}
/>
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={15}
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={15}
/>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@ -172,7 +362,7 @@ export const AllVariants: Story = {
/>
<ContextTag
type="account"
user={{
account={{
name: 'User Name',
emoji: '🐷',
}}
@ -197,15 +387,101 @@ export const AllVariants: Story = {
</Stack>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={20}
outline
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={20}
outline
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={20}
outline
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
outline
/>
<ContextTag type="address" address="0x045...1ah" size={20} outline />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={20}
outline
/>
<ContextTag type="audio" audioLength="00:32" size={20} outline />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
@ -215,6 +491,7 @@ export const AllVariants: Story = {
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={13}
outline
/>
<ContextTag
@ -225,6 +502,7 @@ export const AllVariants: Story = {
name: 'channel',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
@ -234,6 +512,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
@ -243,6 +522,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
@ -252,15 +532,17 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
type="account"
user={{
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
@ -270,22 +552,142 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
outline
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={13}
outline
/>
<ContextTag type="address" address="0x045...1ah" size={24} outline />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={13}
outline
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={13}
outline
/>
<ContextTag type="audio" audioLength="00:32" size={24} outline />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
outline
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={15}
outline
/>
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={15}
outline
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={15}
outline
/>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@ -341,7 +743,7 @@ export const AllVariants: Story = {
/>
<ContextTag
type="account"
user={{
account={{
name: 'User Name',
emoji: '🐷',
}}
@ -369,15 +771,101 @@ export const AllVariants: Story = {
</Stack>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<Stack space flexDirection="column" alignItems="flex-start" gap={12}>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={20}
blur
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={20}
blur
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={20}
blur
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={20}
blur
/>
<ContextTag type="address" address="0x045...1ah" size={20} blur />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={20}
blur
/>
<ContextTag type="audio" audioLength="00:32" size={20} blur />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
@ -387,6 +875,7 @@ export const AllVariants: Story = {
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={13}
blur
/>
<ContextTag
@ -397,6 +886,7 @@ export const AllVariants: Story = {
name: 'channel',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
@ -406,6 +896,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
@ -415,6 +906,7 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
@ -424,15 +916,17 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
type="account"
user={{
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
@ -442,22 +936,142 @@ export const AllVariants: Story = {
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={13}
blur
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={13}
blur
/>
<ContextTag type="address" address="0x045...1ah" size={24} blur />
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={13}
blur
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={13}
blur
/>
<ContextTag type="audio" audioLength="00:32" size={24} blur />
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="default"
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="group"
group={{
name: 'Group',
icon: <MembersIcon size={12} />,
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="channel"
channel={{
communityName: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
name: 'channel',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="community"
community={{
name: 'Rarible',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="token"
token={{
name: '10 ETH',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="network"
network={{
name: 'Network',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="account"
account={{
name: 'User Name',
emoji: '🐷',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="collectible"
collectible={{
name: 'Collectible #123',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
}}
size={24}
textSize={15}
blur
/>
<ContextTag
type="address"
address="0x045...1ah"
size={24}
textSize={15}
blur
/>
<ContextTag
icon={<PendingIcon size={12} />}
type="icon"
label="Context"
size={24}
textSize={15}
blur
/>
<ContextTag
type="audio"
audioLength="00:32"
size={24}
textSize={15}
blur
/>
</Stack>
<Stack space flexDirection="column" alignItems="flex-start">
<ContextTag
type="user"
user={{
name: 'User',
src: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images',
@ -513,7 +1127,7 @@ export const AllVariants: Story = {
/>
<ContextTag
type="account"
user={{
account={{
name: 'User Name',
emoji: '🐷',
}}

131
packages/components/src/context-tag/context-tag.tsx
View File

@ -1,3 +1,5 @@
import { cloneElement } from 'react'
import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
import { Stack, styled } from '@tamagui/core'
import { View } from 'react-native'
@ -5,16 +7,22 @@ import { View } from 'react-native'
import { Avatar } from '../avatar'
import { Text } from '../text'
import type { AvatarProps } from '../avatar'
import type { TextProps } from '../text'
import type { IconProps } from '@status-im/icons'
type Props = {
children?: React.ReactNode
size?: 24 | 32
blur?: boolean
outline?: boolean
} & (
| { type: 'default'; user: { name: string; src: string } }
| { type: 'account'; user: { name: string; emoji: string } }
type Props = { blur?: boolean; outline?: boolean } & (
| {
size?: 20 | 32
}
| {
size?: 24
textSize: 13 | 15
}
) &
(
| { type: 'user'; user: { name: string; src: string } }
| { type: 'account'; account: { name: string; emoji: string } }
| {
type: 'group'
group: {
@ -33,41 +41,63 @@ type Props = {
| { type: 'address'; address: string }
| { type: 'icon'; icon: React.ReactElement; label: string }
| { type: 'audio'; audioLength: string }
| { type: 'label'; children: string }
)
const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
const textSizes: Record<
Exclude<NonNullable<Props['size']>, 24>,
Extract<TextProps['size'], 13 | 15>
> = {
'32': 15,
'24': 13,
/**
* note: "These context sizes are the same size as the ones above (24px), but the text size differs.
* We can have a bigger or smaller text depending on the context."
*
* – https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n?node-id=1336:34320&mode=design#541570513
*/
// '24': 15,
'20': 13,
}
const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = {
const avatarSizes: Record<
NonNullable<Props['size']>,
Extract<AvatarProps['size'], 28 | 20 | 16>
> = {
'32': 28,
'24': 20,
'20': 16,
}
const Label = ({
children,
size,
type = 'default',
}: {
const iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
'32': 20,
'24': 12,
'20': 12,
}
const Label = (props: {
children: string
size: 24 | 32
size: 13 | 15
type?: 'default' | 'monospace'
}) => (
<Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
}) => {
const { children, size, type = 'default' } = props
return (
<Text size={size} weight="medium" color="$neutral-100" type={type}>
{children}
</Text>
)
}
const ContextTag = (props: Props) => {
const { size = 24, blur = false, outline, type } = props
const rounded = type === 'account' || type === 'collectible'
const hasAvatar = type !== 'address'
const hasAvatar = type !== 'address' && type !== 'icon' && type !== 'label'
const textSize = props.size === 24 ? props.textSize : textSizes[props.size!]
const renderContent = () => {
switch (type) {
case 'default': {
case 'user': {
return (
<>
<Avatar
@ -76,7 +106,7 @@ const ContextTag = (props: Props) => {
src={props.user.src}
name={props.user.name}
/>
<Label size={size}>{props.user.name}</Label>
<Label size={textSize}>{props.user.name}</Label>
</>
)
}
@ -89,7 +119,7 @@ const ContextTag = (props: Props) => {
src={props.community.src}
name={props.community.name}
/>
<Label size={size}>{props.community.name}</Label>
<Label size={textSize}>{props.community.name}</Label>
</>
)
}
@ -103,9 +133,9 @@ const ContextTag = (props: Props) => {
name={props.channel.name}
/>
<Stack flexDirection="row" gap="$0" alignItems="center">
<Label size={size}>{props.channel.communityName}</Label>
<Label size={textSize}>{props.channel.communityName}</Label>
<ChevronRightIcon color="$neutral-50" size={20} />
<Label size={size}>{`# ` + props.channel.name}</Label>
<Label size={textSize}>{`# ` + props.channel.name}</Label>
</Stack>
</>
)
@ -119,13 +149,13 @@ const ContextTag = (props: Props) => {
src={props.token.src}
name={props.token.name}
/>
<Label size={size}>{props.token.name}</Label>
<Label size={textSize}>{props.token.name}</Label>
</>
)
}
case 'address': {
return (
<Label size={size} type="monospace">
<Label size={textSize} type="monospace">
{props.address}
</Label>
)
@ -140,7 +170,7 @@ const ContextTag = (props: Props) => {
backgroundColor="$primary-50"
color="$white-100"
/>
<Label size={size}>{props.audioLength}</Label>
<Label size={textSize}>{props.audioLength}</Label>
</>
)
}
@ -150,9 +180,9 @@ const ContextTag = (props: Props) => {
<Avatar
type="account"
size={avatarSizes[size]}
name={props.user.emoji}
name={props.account.emoji}
/>
<Label size={size}>{props.user.name}</Label>
<Label size={textSize}>{props.account.name}</Label>
</>
)
}
@ -166,7 +196,7 @@ const ContextTag = (props: Props) => {
color="$white-70"
icon={props.group.icon}
/>
<Label size={size}>{props.group.name}</Label>
<Label size={textSize}>{props.group.name}</Label>
</>
)
}
@ -179,37 +209,38 @@ const ContextTag = (props: Props) => {
src={props.network.src}
name={props.network.name}
/>
<Label size={size}>{props.network.name}</Label>
<Label size={textSize}>{props.network.name}</Label>
</>
)
}
case 'collectible': {
return (
<>
{/* fixme: not an avatar but a resized image; see https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n?node-id=1336:34320&mode=design#541620575 */}
<Avatar
type="account"
size={avatarSizes[size]}
src={props.collectible.src}
name={props.collectible.name}
/>
<Label size={size}>{props.collectible.name}</Label>
<Label size={textSize}>{props.collectible.name}</Label>
</>
)
}
case 'icon': {
return (
<>
<Avatar
type="icon"
size={avatarSizes[size]}
icon={props.icon}
backgroundColor="$transparent"
color="$neutral-50"
/>
<Label size={size}>{props.label}</Label>
{cloneElement(props.icon, {
size: iconSizes[size],
color: '$neutral-50',
})}
<Label size={textSize}>{props.label}</Label>
</>
)
}
case 'label': {
return <Label size={textSize}>{props.children}</Label>
}
}
}
@ -219,8 +250,8 @@ const ContextTag = (props: Props) => {
blur={blur}
borderRadius={rounded ? '$8' : '$full'}
size={size}
paddingVertical={hasAvatar ? 0 : 1}
paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
textSize={textSize}
{...(hasAvatar && { paddingLeft: 1 })}
>
{renderContent()}
</Base>
@ -257,10 +288,14 @@ const Base = styled(View, {
},
},
size: {
20: {
height: 20,
gap: 4,
paddingHorizontal: 6,
},
24: {
height: 24,
gap: 4,
paddingHorizontal: 8,
},
32: {
height: 32,
@ -268,5 +303,13 @@ const Base = styled(View, {
paddingHorizontal: 12,
},
},
textSize: {
13: {
paddingHorizontal: 8,
},
15: {
paddingHorizontal: 6,
},
},
} as const,
})

1
packages/components/src/pinned-message/pinned-message.tsx
View File

@ -37,6 +37,7 @@ const PinnedMessage = (props: Props) => {
</Text>
<ContextTag
size={24}
textSize={13}
type="channel"
channel={{
communityName: 'Rarible',