feat: create TagContainer component for header
This commit is contained in:
parent
b239139b01
commit
d4b3fff170
|
@ -0,0 +1,4 @@
|
||||||
|
|
||||||
|
.tag-container div:nth-child(1) {
|
||||||
|
background:transparent;
|
||||||
|
}
|
|
@ -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
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue