mirror of
https://github.com/status-im/dappconnect-chat-sdk.git
synced 2025-01-12 15:04:52 +00:00
u Context Tag
This commit is contained in:
Felicio Mununga
parent
d12e50ab2c
commit
646318c182
@ -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,10 +43,86 @@ 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',
|
||||
@ -96,7 +172,7 @@ export const AllVariants: Story = {
|
||||
/>
|
||||
<ContextTag
|
||||
type="account"
|
||||
user={{
|
||||
account={{
|
||||
name: 'User Name',
|
||||
emoji: '🐷',
|
||||
}}
|
||||
@ -122,7 +198,7 @@ export const AllVariants: Story = {
|
||||
|
||||
<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',
|
||||
@ -172,7 +248,7 @@ export const AllVariants: Story = {
|
||||
/>
|
||||
<ContextTag
|
||||
type="account"
|
||||
user={{
|
||||
account={{
|
||||
name: 'User Name',
|
||||
emoji: '🐷',
|
||||
}}
|
||||
@ -197,10 +273,95 @@ 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',
|
||||
@ -256,7 +417,7 @@ export const AllVariants: Story = {
|
||||
/>
|
||||
<ContextTag
|
||||
type="account"
|
||||
user={{
|
||||
account={{
|
||||
name: 'User Name',
|
||||
emoji: '🐷',
|
||||
}}
|
||||
@ -285,7 +446,7 @@ export const AllVariants: Story = {
|
||||
|
||||
<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',
|
||||
@ -341,7 +502,7 @@ export const AllVariants: Story = {
|
||||
/>
|
||||
<ContextTag
|
||||
type="account"
|
||||
user={{
|
||||
account={{
|
||||
name: 'User Name',
|
||||
emoji: '🐷',
|
||||
}}
|
||||
@ -369,10 +530,95 @@ 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',
|
||||
@ -428,7 +674,7 @@ export const AllVariants: Story = {
|
||||
/>
|
||||
<ContextTag
|
||||
type="account"
|
||||
user={{
|
||||
account={{
|
||||
name: 'User Name',
|
||||
emoji: '🐷',
|
||||
}}
|
||||
@ -457,7 +703,7 @@ export const AllVariants: Story = {
|
||||
|
||||
<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',
|
||||
@ -513,7 +759,7 @@ export const AllVariants: Story = {
|
||||
/>
|
||||
<ContextTag
|
||||
type="account"
|
||||
user={{
|
||||
account={{
|
||||
name: 'User Name',
|
||||
emoji: '🐷',
|
||||
}}
|
||||
|
||||
@ -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,17 @@ 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
|
||||
size?: 20 | 24 | 32
|
||||
blur?: boolean
|
||||
outline?: boolean
|
||||
} & (
|
||||
| { type: 'default'; user: { name: string; src: string } }
|
||||
| { type: 'account'; user: { name: string; emoji: string } }
|
||||
| { type: 'user'; user: { name: string; src: string } }
|
||||
| { type: 'account'; account: { name: string; emoji: string } }
|
||||
| {
|
||||
type: 'group'
|
||||
group: {
|
||||
@ -33,16 +36,28 @@ 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']> = {
|
||||
'32': 15,
|
||||
'24': 13,
|
||||
'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 iconSizes: Record<NonNullable<Props['size']>, IconProps['size']> = {
|
||||
'32': 20,
|
||||
'24': 12,
|
||||
'20': 12,
|
||||
}
|
||||
|
||||
const Label = ({
|
||||
@ -51,7 +66,7 @@ const Label = ({
|
||||
type = 'default',
|
||||
}: {
|
||||
children: string
|
||||
size: 24 | 32
|
||||
size: 20 | 24 | 32
|
||||
type?: 'default' | 'monospace'
|
||||
}) => (
|
||||
<Text size={textSizes[size]} weight="medium" color="$neutral-100" type={type}>
|
||||
@ -63,11 +78,11 @@ 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 renderContent = () => {
|
||||
switch (type) {
|
||||
case 'default': {
|
||||
case 'user': {
|
||||
return (
|
||||
<>
|
||||
<Avatar
|
||||
@ -150,9 +165,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={size}>{props.account.name}</Label>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -199,17 +214,17 @@ const ContextTag = (props: Props) => {
|
||||
case 'icon': {
|
||||
return (
|
||||
<>
|
||||
<Avatar
|
||||
type="icon"
|
||||
size={avatarSizes[size]}
|
||||
icon={props.icon}
|
||||
backgroundColor="$transparent"
|
||||
color="$neutral-50"
|
||||
/>
|
||||
{cloneElement(props.icon, {
|
||||
size: iconSizes[size],
|
||||
color: '$neutral-50',
|
||||
})}
|
||||
<Label size={size}>{props.label}</Label>
|
||||
</>
|
||||
)
|
||||
}
|
||||
case 'label': {
|
||||
return <Label size={size}>{props.children}</Label>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -219,8 +234,7 @@ const ContextTag = (props: Props) => {
|
||||
blur={blur}
|
||||
borderRadius={rounded ? '$8' : '$full'}
|
||||
size={size}
|
||||
paddingVertical={hasAvatar ? 0 : 1}
|
||||
paddingLeft={hasAvatar ? 1 : size === 24 ? 8 : 12}
|
||||
{...(hasAvatar && { paddingLeft: 1 })}
|
||||
>
|
||||
{renderContent()}
|
||||
</Base>
|
||||
@ -257,6 +271,11 @@ const Base = styled(View, {
|
||||
},
|
||||
},
|
||||
size: {
|
||||
20: {
|
||||
height: 20,
|
||||
gap: 4,
|
||||
paddingHorizontal: 6,
|
||||
},
|
||||
24: {
|
||||
height: 24,
|
||||
gap: 4,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user