feat: create TagContainer component for header

This commit is contained in:
Ivana Andersson 2023-08-18 12:24:20 +03:00
parent b239139b01
commit d4b3fff170
3 changed files with 21 additions and 6 deletions

View File

@ -0,0 +1,4 @@
.tag-container div:nth-child(1) {
background:transparent;
}

View File

@ -0,0 +1,15 @@
import { Tag } from '@status-im/components'
import { XStack } from 'tamagui'
import PairIcon from '../Icons/PairIcon'
import CreateIcon from '../Icons/CreateIcon'
const TagContainer = () => {
return (
<XStack space={'$2'} alignItems="center" className="tag-container">
<Tag icon={PairIcon} label="Pair" size={32} />
<Tag selected icon={CreateIcon} label="Create" size={32} />
</XStack>
)
}
export default TagContainer

View File

@ -3,10 +3,9 @@ import { Button as StatusButton, Tag, Text, Avatar, Checkbox } from '@status-im/
import { Label, Separator, XStack, YStack } from 'tamagui' import { Label, Separator, XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow' import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
import NimbusLogo from '../../components/Logos/NimbusLogo' import NimbusLogo from '../../components/Logos/NimbusLogo'
import TagContainer from '../../components/General/TagContainer'
import Titles from '../../components/General/Titles' import Titles from '../../components/General/Titles'
import NodeIcon from '../../components/Icons/NodeIcon' import NodeIcon from '../../components/Icons/NodeIcon'
import PairIcon from '../../components/Icons/PairIcon'
import CreateIcon from '../../components/Icons/CreateIcon'
import LabelInputField from '../../components/General/LabelInputField' import LabelInputField from '../../components/General/LabelInputField'
import ReactionIcon from '../../components/Icons/ReactionIcon' import ReactionIcon from '../../components/Icons/ReactionIcon'
import ColorPicker from '../../components/General/ColorPicker' import ColorPicker from '../../components/General/ColorPicker'
@ -19,10 +18,7 @@ const CreateLocalNodePage = () => {
<div className="connection-page"> <div className="connection-page">
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<NimbusLogo /> <NimbusLogo />
<XStack space={'$2'} alignItems="center"> <TagContainer />
<Tag icon={PairIcon} label="Pair" size={32} />
<Tag selected icon={CreateIcon} label="Create" size={32} />
</XStack>
</XStack> </XStack>
<article className="content"> <article className="content">
<Titles <Titles