Refactor Context tag component (#379)
* switch * context tag refactor * merge conflicts * use new Avatar component * clean up * clean up * simplify * fix * fix * omg final fix * pr fixes * type fix * fix positioning * clean up
This commit is contained in:
Jakub Kotula
GitHub
parent
811fa081a8
commit
1df8c16091
|
|
@ -37,8 +37,8 @@
|
||||||
"@radix-ui/react-tabs": "^1.0.3",
|
"@radix-ui/react-tabs": "^1.0.3",
|
||||||
"@radix-ui/react-toast": "^1.1.3",
|
"@radix-ui/react-toast": "^1.1.3",
|
||||||
"@radix-ui/react-tooltip": "^1.0.5",
|
"@radix-ui/react-tooltip": "^1.0.5",
|
||||||
"@status-im/icons": "*",
|
|
||||||
"@status-im/colors": "*",
|
"@status-im/colors": "*",
|
||||||
|
"@status-im/icons": "*",
|
||||||
"@tamagui/animations-css": "1.11.1",
|
"@tamagui/animations-css": "1.11.1",
|
||||||
"@tamagui/animations-react-native": "1.11.1",
|
"@tamagui/animations-react-native": "1.11.1",
|
||||||
"@tamagui/core": "1.11.1",
|
"@tamagui/core": "1.11.1",
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ type WalletAvatarProps = {
|
||||||
|
|
||||||
type ChannelAvatarProps = {
|
type ChannelAvatarProps = {
|
||||||
type: 'channel'
|
type: 'channel'
|
||||||
size: 80 | 32 | 24 | 20
|
size: 80 | 32 | 28 | 24 | 20
|
||||||
emoji: string
|
emoji: string
|
||||||
backgroundColor?: ColorTokens
|
backgroundColor?: ColorTokens
|
||||||
background?: ColorTokens
|
background?: ColorTokens
|
||||||
|
|
@ -50,7 +50,7 @@ type ChannelAvatarProps = {
|
||||||
|
|
||||||
type CommunityAvatarProps = {
|
type CommunityAvatarProps = {
|
||||||
type: 'community'
|
type: 'community'
|
||||||
size: 80 | 32 | 24 | 20
|
size: 80 | 32 | 28 | 24 | 20
|
||||||
name: string
|
name: string
|
||||||
src?: string
|
src?: string
|
||||||
backgroundColor?: ColorTokens
|
backgroundColor?: ColorTokens
|
||||||
|
|
@ -66,7 +66,7 @@ type AccountAvatarProps = {
|
||||||
|
|
||||||
type IconAvatarProps = {
|
type IconAvatarProps = {
|
||||||
type: 'icon'
|
type: 'icon'
|
||||||
size: 48 | 32 | 20
|
size: 48 | 32 | 28 | 24 | 20
|
||||||
icon: React.ReactElement
|
icon: React.ReactElement
|
||||||
backgroundColor?: ColorTokens
|
backgroundColor?: ColorTokens
|
||||||
color?: ColorTokens
|
color?: ColorTokens
|
||||||
|
|
@ -108,6 +108,7 @@ const channelEmojiSizes: Record<ChannelAvatarProps['size'], TextProps['size']> =
|
||||||
// todo: design review
|
// todo: design review
|
||||||
'80': 27,
|
'80': 27,
|
||||||
'32': 15,
|
'32': 15,
|
||||||
|
'28': 13,
|
||||||
'24': 13,
|
'24': 13,
|
||||||
'20': 11,
|
'20': 11,
|
||||||
}
|
}
|
||||||
|
|
@ -145,6 +146,7 @@ const channelLockIconVariants: Record<
|
||||||
// todo: design review
|
// todo: design review
|
||||||
'80': { baseVariant: 80, iconSize: 40 },
|
'80': { baseVariant: 80, iconSize: 40 },
|
||||||
'32': { baseVariant: 24, iconSize: 12 },
|
'32': { baseVariant: 24, iconSize: 12 },
|
||||||
|
'28': { baseVariant: 24, iconSize: 12 },
|
||||||
'24': { baseVariant: 24, iconSize: 12 },
|
'24': { baseVariant: 24, iconSize: 12 },
|
||||||
'20': { baseVariant: 20, iconSize: 12 },
|
'20': { baseVariant: 20, iconSize: 12 },
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { PendingIcon } from '@status-im/icons'
|
import { MembersIcon, PendingIcon } from '@status-im/icons'
|
||||||
import { Stack } from '@tamagui/core'
|
import { Stack } from 'tamagui'
|
||||||
|
|
||||||
import { ContextTag } from './context-tag'
|
import { ContextTag } from './context-tag'
|
||||||
|
|
||||||
|
|
@ -8,9 +8,19 @@ import type { Meta, StoryObj } from '@storybook/react'
|
||||||
const meta: Meta<typeof ContextTag> = {
|
const meta: Meta<typeof ContextTag> = {
|
||||||
component: ContextTag,
|
component: ContextTag,
|
||||||
argTypes: {
|
argTypes: {
|
||||||
label: {
|
type: [
|
||||||
control: ['Rarible', '# channel-name'],
|
'default',
|
||||||
},
|
'account',
|
||||||
|
'group',
|
||||||
|
'community',
|
||||||
|
'channel',
|
||||||
|
'token',
|
||||||
|
'network',
|
||||||
|
'collectible',
|
||||||
|
'address',
|
||||||
|
'icon',
|
||||||
|
'audio',
|
||||||
|
],
|
||||||
size: [24, 32],
|
size: [24, 32],
|
||||||
outline: [true, false],
|
outline: [true, false],
|
||||||
blur: [true, false],
|
blur: [true, false],
|
||||||
|
|
@ -19,8 +29,14 @@ const meta: Meta<typeof ContextTag> = {
|
||||||
|
|
||||||
type Story = StoryObj<typeof ContextTag>
|
type Story = StoryObj<typeof ContextTag>
|
||||||
|
|
||||||
export const Base: Story = {
|
export const Default: Story = {
|
||||||
args: { label: 'Name', size: 24, outline: false, blur: false },
|
args: {
|
||||||
|
type: 'account',
|
||||||
|
user: { name: 'user name ', emoji: '🐷' },
|
||||||
|
size: 24,
|
||||||
|
outline: false,
|
||||||
|
blur: false,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export const AllVariants: Story = {
|
export const AllVariants: Story = {
|
||||||
|
|
@ -28,31 +44,501 @@ export const AllVariants: Story = {
|
||||||
render: () => (
|
render: () => (
|
||||||
<Stack space flexDirection="row">
|
<Stack space flexDirection="row">
|
||||||
<Stack space flexDirection="column" alignItems="flex-start">
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
<ContextTag label="Name" />
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
<ContextTag type="group" label="Group" />
|
<ContextTag
|
||||||
<ContextTag
|
type="default"
|
||||||
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"
|
user={{
|
||||||
type="channel"
|
name: 'User',
|
||||||
label={['Rarible', '# channel']}
|
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',
|
||||||
/>
|
}}
|
||||||
<ContextTag
|
size={24}
|
||||||
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"
|
/>
|
||||||
type="community"
|
<ContextTag
|
||||||
label="Coinbase"
|
type="group"
|
||||||
outline={true}
|
group={{
|
||||||
/>
|
name: 'Group',
|
||||||
<ContextTag type="token" label="10 ETH" />
|
icon: <MembersIcon size={12} />,
|
||||||
<ContextTag type="network" label="Network" />
|
}}
|
||||||
<ContextTag type="account" label="Account Name" />
|
size={24}
|
||||||
<ContextTag type="collectible" label="Collectible #123" />
|
/>
|
||||||
<ContextTag type="address" label="0x045...1ah" />
|
<ContextTag
|
||||||
<ContextTag
|
type="channel"
|
||||||
icon={<PendingIcon size={12} />}
|
channel={{
|
||||||
type="icon"
|
communityName: 'Rarible',
|
||||||
label="Context"
|
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',
|
||||||
outline
|
name: 'channel',
|
||||||
/>
|
}}
|
||||||
<ContextTag type="audio" label="00:32" />
|
size={24}
|
||||||
|
/>
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="account"
|
||||||
|
user={{
|
||||||
|
name: 'User Name',
|
||||||
|
emoji: '🐷',
|
||||||
|
}}
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
<ContextTag type="address" address="0x045...1ah" size={24} />
|
||||||
|
<ContextTag
|
||||||
|
icon={<PendingIcon size={12} />}
|
||||||
|
type="icon"
|
||||||
|
label="Context"
|
||||||
|
size={24}
|
||||||
|
/>
|
||||||
|
<ContextTag type="audio" audioLength="00:32" size={24} />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<ContextTag
|
||||||
|
type="default"
|
||||||
|
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={32}
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="group"
|
||||||
|
group={{
|
||||||
|
name: 'Group',
|
||||||
|
icon: <MembersIcon size={16} />,
|
||||||
|
}}
|
||||||
|
size={32}
|
||||||
|
/>
|
||||||
|
<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={32}
|
||||||
|
/>
|
||||||
|
<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={32}
|
||||||
|
/>
|
||||||
|
<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={32}
|
||||||
|
/>
|
||||||
|
<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={32}
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="account"
|
||||||
|
user={{
|
||||||
|
name: 'User Name',
|
||||||
|
emoji: '🐷',
|
||||||
|
}}
|
||||||
|
size={32}
|
||||||
|
/>
|
||||||
|
<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={32}
|
||||||
|
/>
|
||||||
|
<ContextTag type="address" address="0x045...1ah" size={32} />
|
||||||
|
<ContextTag
|
||||||
|
icon={<PendingIcon size={16} />}
|
||||||
|
type="icon"
|
||||||
|
label="Context"
|
||||||
|
size={32}
|
||||||
|
/>
|
||||||
|
<ContextTag type="audio" audioLength="00:32" size={32} />
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<ContextTag
|
||||||
|
type="default"
|
||||||
|
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}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="group"
|
||||||
|
group={{
|
||||||
|
name: 'Group',
|
||||||
|
icon: <MembersIcon size={12} />,
|
||||||
|
}}
|
||||||
|
size={24}
|
||||||
|
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}
|
||||||
|
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}
|
||||||
|
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}
|
||||||
|
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}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="account"
|
||||||
|
user={{
|
||||||
|
name: 'User Name',
|
||||||
|
emoji: '🐷',
|
||||||
|
}}
|
||||||
|
size={24}
|
||||||
|
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}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag type="address" address="0x045...1ah" size={24} outline />
|
||||||
|
<ContextTag
|
||||||
|
icon={<PendingIcon size={12} />}
|
||||||
|
type="icon"
|
||||||
|
label="Context"
|
||||||
|
size={24}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag type="audio" audioLength="00:32" size={24} outline />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<ContextTag
|
||||||
|
type="default"
|
||||||
|
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={32}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="group"
|
||||||
|
group={{
|
||||||
|
name: 'Group',
|
||||||
|
icon: <MembersIcon size={16} />,
|
||||||
|
}}
|
||||||
|
size={32}
|
||||||
|
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={32}
|
||||||
|
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={32}
|
||||||
|
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={32}
|
||||||
|
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={32}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="account"
|
||||||
|
user={{
|
||||||
|
name: 'User Name',
|
||||||
|
emoji: '🐷',
|
||||||
|
}}
|
||||||
|
size={32}
|
||||||
|
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={32}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag type="address" address="0x045...1ah" size={32} outline />
|
||||||
|
<ContextTag
|
||||||
|
icon={<PendingIcon size={16} />}
|
||||||
|
type="icon"
|
||||||
|
label="Context"
|
||||||
|
size={32}
|
||||||
|
outline
|
||||||
|
/>
|
||||||
|
<ContextTag type="audio" audioLength="00:32" size={32} outline />
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<ContextTag
|
||||||
|
type="default"
|
||||||
|
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}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="group"
|
||||||
|
group={{
|
||||||
|
name: 'Group',
|
||||||
|
icon: <MembersIcon size={12} />,
|
||||||
|
}}
|
||||||
|
size={24}
|
||||||
|
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}
|
||||||
|
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}
|
||||||
|
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}
|
||||||
|
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}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="account"
|
||||||
|
user={{
|
||||||
|
name: 'User Name',
|
||||||
|
emoji: '🐷',
|
||||||
|
}}
|
||||||
|
size={24}
|
||||||
|
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}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag type="address" address="0x045...1ah" size={24} blur />
|
||||||
|
<ContextTag
|
||||||
|
icon={<PendingIcon size={12} />}
|
||||||
|
type="icon"
|
||||||
|
label="Context"
|
||||||
|
size={24}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag type="audio" audioLength="00:32" size={24} blur />
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack space flexDirection="column" alignItems="flex-start">
|
||||||
|
<ContextTag
|
||||||
|
type="default"
|
||||||
|
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={32}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="group"
|
||||||
|
group={{
|
||||||
|
name: 'Group',
|
||||||
|
icon: <MembersIcon size={16} />,
|
||||||
|
}}
|
||||||
|
size={32}
|
||||||
|
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={32}
|
||||||
|
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={32}
|
||||||
|
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={32}
|
||||||
|
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={32}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag
|
||||||
|
type="account"
|
||||||
|
user={{
|
||||||
|
name: 'User Name',
|
||||||
|
emoji: '🐷',
|
||||||
|
}}
|
||||||
|
size={32}
|
||||||
|
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={32}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag type="address" address="0x045...1ah" size={32} blur />
|
||||||
|
<ContextTag
|
||||||
|
icon={<PendingIcon size={16} />}
|
||||||
|
type="icon"
|
||||||
|
label="Context"
|
||||||
|
size={32}
|
||||||
|
blur
|
||||||
|
/>
|
||||||
|
<ContextTag type="audio" audioLength="00:32" size={32} blur />
|
||||||
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,228 @@
|
||||||
import { cloneElement, Fragment } from 'react'
|
import { ChevronRightIcon, PlayIcon } from '@status-im/icons'
|
||||||
|
import { Stack, styled } from '@tamagui/core'
|
||||||
import { ChevronRightIcon } from '@status-im/icons'
|
|
||||||
import { styled } from '@tamagui/core'
|
|
||||||
import { View } from 'react-native'
|
import { View } from 'react-native'
|
||||||
|
|
||||||
import { Avatar } from '../avatar'
|
import { Avatar } from '../avatar'
|
||||||
import { Text } from '../text'
|
import { Text } from '../text'
|
||||||
|
|
||||||
import type { AvatarProps } from '../avatar'
|
|
||||||
import type { TextProps } from '../text'
|
import type { TextProps } from '../text'
|
||||||
|
|
||||||
type ContextTagType =
|
|
||||||
| 'default'
|
|
||||||
| 'group'
|
|
||||||
| 'channel'
|
|
||||||
| 'community'
|
|
||||||
| 'token'
|
|
||||||
| 'network'
|
|
||||||
| 'account'
|
|
||||||
| 'collectible'
|
|
||||||
| 'address'
|
|
||||||
| 'icon'
|
|
||||||
| 'audio'
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
src?: string
|
|
||||||
icon?: React.ReactElement
|
|
||||||
label: string | [string, string]
|
|
||||||
type?: ContextTagType
|
|
||||||
size?: 24 | 32
|
size?: 24 | 32
|
||||||
blur?: boolean
|
blur?: boolean
|
||||||
outline?: boolean
|
outline?: boolean
|
||||||
}
|
} & (
|
||||||
|
| { type: 'default'; user: { name: string; src: string } }
|
||||||
|
| { type: 'account'; user: { name: string; emoji: string } }
|
||||||
|
| {
|
||||||
|
type: 'group'
|
||||||
|
group: {
|
||||||
|
name: string
|
||||||
|
icon: React.ReactElement
|
||||||
|
}
|
||||||
|
}
|
||||||
|
| { type: 'community'; community: { name: string; src: string } }
|
||||||
|
| {
|
||||||
|
type: 'channel'
|
||||||
|
channel: { communityName: string; src: string; name: string }
|
||||||
|
}
|
||||||
|
| { type: 'token'; token: { name: string; src: string } }
|
||||||
|
| { type: 'network'; network: { name: string; src: string } }
|
||||||
|
| { type: 'collectible'; collectible: { name: string; src: string } }
|
||||||
|
| { type: 'address'; address: string }
|
||||||
|
| { type: 'icon'; icon: React.ReactElement; label: string }
|
||||||
|
| { type: 'audio'; audioLength: string }
|
||||||
|
)
|
||||||
|
|
||||||
const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
|
const textSizes: Record<NonNullable<Props['size']>, TextProps['size']> = {
|
||||||
'32': 15,
|
'32': 15,
|
||||||
'24': 13,
|
'24': 13,
|
||||||
}
|
}
|
||||||
|
|
||||||
const avatarSizes: Record<NonNullable<Props['size']>, AvatarProps['size']> = {
|
const avatarSizes: Record<NonNullable<Props['size']>, 28 | 20> = {
|
||||||
'32': 28,
|
'32': 28,
|
||||||
'24': 20,
|
'24': 20,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Label = ({ children, size }: { children: string; size: 24 | 32 }) => (
|
const Label = ({
|
||||||
<Text size={textSizes[size]} weight="medium" color="$neutral-100">
|
children,
|
||||||
|
size,
|
||||||
|
type = 'default',
|
||||||
|
}: {
|
||||||
|
children: string
|
||||||
|
size: 24 | 32
|
||||||
|
type?: 'default' | 'monospace'
|
||||||
|
}) => (
|
||||||
|
<Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
|
||||||
{children}
|
{children}
|
||||||
</Text>
|
</Text>
|
||||||
)
|
)
|
||||||
|
|
||||||
const ContextTag = (props: Props) => {
|
const ContextTag = (props: Props) => {
|
||||||
const {
|
const { size = 24, blur = false, outline, type } = props
|
||||||
src,
|
|
||||||
icon,
|
|
||||||
label,
|
|
||||||
// type = 'default', // this is commented because it's not being used
|
|
||||||
size = 24,
|
|
||||||
blur = false,
|
|
||||||
outline,
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const hasImg = Boolean(src || icon)
|
const rounded = type === 'account' || type === 'collectible'
|
||||||
|
const hasAvatar = type !== 'address'
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'default': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="user"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
src={props.user.src}
|
||||||
|
name={props.user.name}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.user.name}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'community': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="community"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
src={props.community.src}
|
||||||
|
name={props.community.name}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.community.name}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'channel': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="community"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
src={props.channel.src}
|
||||||
|
name={props.channel.name}
|
||||||
|
/>
|
||||||
|
<Stack flexDirection="row" gap="$0" alignItems="center">
|
||||||
|
<Label size={size}>{props.channel.communityName}</Label>
|
||||||
|
<ChevronRightIcon color="$neutral-50" size={20} />
|
||||||
|
<Label size={size}>{`# ` + props.channel.name}</Label>
|
||||||
|
</Stack>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'token': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="community"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
src={props.token.src}
|
||||||
|
name={props.token.name}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.token.name}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'address': {
|
||||||
|
return (
|
||||||
|
<Label size={size} type="monospace">
|
||||||
|
{props.address}
|
||||||
|
</Label>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'audio': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="icon"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
icon={<PlayIcon size={16} />}
|
||||||
|
backgroundColor="$primary-50"
|
||||||
|
color="$white-100"
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.audioLength}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'account': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="account"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
name={props.user.emoji}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.user.name}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'group': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="icon"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
backgroundColor="$purple-50"
|
||||||
|
color="$white-70"
|
||||||
|
icon={props.group.icon}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.group.name}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'network': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="community"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
src={props.network.src}
|
||||||
|
name={props.network.name}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{props.network.name}</Label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
case 'collectible': {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Avatar
|
||||||
|
type="account"
|
||||||
|
size={avatarSizes[size]}
|
||||||
|
src={props.collectible.src}
|
||||||
|
name={props.collectible.name}
|
||||||
|
/>
|
||||||
|
<Label size={size}>{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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Base outline={outline} size={size} hasImg={hasImg} blur={blur}>
|
<Base
|
||||||
{src && <Avatar type="user" name="" size={avatarSizes[size]} src={src} />}
|
outline={outline}
|
||||||
{icon && cloneElement(icon, { color: '$neutral-50' })}
|
blur={blur}
|
||||||
|
borderRadius={rounded ? '$8' : '$full'}
|
||||||
{Array.isArray(label) ? (
|
size={size}
|
||||||
label.map((item, i) => {
|
paddingVertical={hasAvatar ? 0 : 1}
|
||||||
if (i !== 0) {
|
paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
|
||||||
return (
|
>
|
||||||
<Fragment key={item}>
|
{renderContent()}
|
||||||
<ChevronRightIcon size={16} color="$neutral-50" />
|
|
||||||
<Label size={size}>{item}</Label>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Label size={size} key={item}>
|
|
||||||
{item}
|
|
||||||
</Label>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<Label size={size}>{label}</Label>
|
|
||||||
)}
|
|
||||||
</Base>
|
</Base>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -97,8 +232,6 @@ export type { Props as ContextTagProps }
|
||||||
|
|
||||||
const Base = styled(View, {
|
const Base = styled(View, {
|
||||||
backgroundColor: '$neutral-10',
|
backgroundColor: '$neutral-10',
|
||||||
paddingVertical: 1,
|
|
||||||
borderRadius: '$20',
|
|
||||||
display: 'inline-flex',
|
display: 'inline-flex',
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
|
@ -124,24 +257,16 @@ const Base = styled(View, {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
24: props => {
|
24: {
|
||||||
// there is only first param which is "size" and hasImg doesn't exist here
|
height: 24,
|
||||||
return {
|
gap: 4,
|
||||||
space: 4,
|
paddingHorizontal: 8,
|
||||||
paddingLeft: props.hasImg ? 8 : 2,
|
},
|
||||||
paddingRight: 8,
|
32: {
|
||||||
}
|
height: 32,
|
||||||
|
gap: 8,
|
||||||
|
paddingHorizontal: 12,
|
||||||
},
|
},
|
||||||
32: ({ hasImg }) => ({
|
|
||||||
// this therefore doesn't work as well
|
|
||||||
space: 8,
|
|
||||||
paddingLeft: hasImg ? 12 : 2,
|
|
||||||
paddingRight: 12,
|
|
||||||
}),
|
|
||||||
},
|
},
|
||||||
hasImg: {
|
|
||||||
true: {},
|
|
||||||
false: {},
|
|
||||||
}, // to correctly infer the type of the variant
|
|
||||||
} as const,
|
} as const,
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -36,8 +36,13 @@ const PinnedMessage = (props: Props) => {
|
||||||
Pinned Messages
|
Pinned Messages
|
||||||
</Text>
|
</Text>
|
||||||
<ContextTag
|
<ContextTag
|
||||||
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}
|
||||||
label={['Rarible', '# random']}
|
type="channel"
|
||||||
|
channel={{
|
||||||
|
communityName: 'Rarible',
|
||||||
|
name: 'random',
|
||||||
|
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',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue