feat: create `Header` component and add it to pages
This commit is contained in:
parent
80fc6347fe
commit
a5372f226b
|
@ -0,0 +1,14 @@
|
||||||
|
import { XStack } from 'tamagui'
|
||||||
|
import NimbusLogo from '../Logos/NimbusLogo'
|
||||||
|
import TagContainer from './TagContainer'
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<XStack style={{ justifyContent: 'space-between' }} py={'25px'}>
|
||||||
|
<NimbusLogo />
|
||||||
|
<TagContainer />
|
||||||
|
</XStack>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
|
@ -2,13 +2,12 @@ import { useState } from 'react'
|
||||||
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
|
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
|
||||||
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 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 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'
|
||||||
|
import Header from '../../components/General/Header'
|
||||||
|
|
||||||
const CreateLocalNodePage = () => {
|
const CreateLocalNodePage = () => {
|
||||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||||
|
@ -16,10 +15,7 @@ const CreateLocalNodePage = () => {
|
||||||
return (
|
return (
|
||||||
<PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true}>
|
<PageWrapperShadow rightImageSrc="/background-images/day-night-bg.png" rightImageLogo={true}>
|
||||||
<div className="connection-page">
|
<div className="connection-page">
|
||||||
<XStack justifyContent={'space-between'}>
|
<Header />
|
||||||
<NimbusLogo />
|
|
||||||
<TagContainer />
|
|
||||||
</XStack>
|
|
||||||
<article className="content">
|
<article className="content">
|
||||||
<Titles
|
<Titles
|
||||||
title="Create Local Node"
|
title="Create Local Node"
|
||||||
|
|
|
@ -1,17 +1,15 @@
|
||||||
import { Separator, XStack, YStack } from 'tamagui'
|
import { Separator, XStack, YStack } from 'tamagui'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { Button, Checkbox, Tag, Text } from '@status-im/components'
|
import { Button, Checkbox, Text } from '@status-im/components'
|
||||||
|
|
||||||
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
||||||
import SyncStatus from './SyncStatus'
|
import SyncStatus from './SyncStatus'
|
||||||
import NimbusLogo from '../../components/Logos/NimbusLogo'
|
|
||||||
import PairIcon from '../../components/Icons/PairIcon'
|
|
||||||
import CreateIcon from '../../components/Icons/CreateIcon'
|
|
||||||
import NodeIcon from '../../components/Icons/NodeIcon'
|
import NodeIcon from '../../components/Icons/NodeIcon'
|
||||||
import Titles from '../../components/General/Titles'
|
import Titles from '../../components/General/Titles'
|
||||||
import PairedSuccessfully from './PairedSuccessfully'
|
import PairedSuccessfully from './PairedSuccessfully'
|
||||||
import { CreateAvatar } from './CreateAvatar'
|
import { CreateAvatar } from './CreateAvatar'
|
||||||
import GenerateId from './GenerateId'
|
import GenerateId from './GenerateId'
|
||||||
|
import Header from '../../components/General/Header'
|
||||||
|
|
||||||
const PairDevice = () => {
|
const PairDevice = () => {
|
||||||
const [autoChecked, setAutoChecked] = useState(false)
|
const [autoChecked, setAutoChecked] = useState(false)
|
||||||
|
@ -31,13 +29,7 @@ const PairDevice = () => {
|
||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<XStack style={{ justifyContent: 'space-between' }}>
|
<Header />
|
||||||
<NimbusLogo />
|
|
||||||
<XStack space={'$2'} style={{ alignItems: 'center' }}>
|
|
||||||
<Tag icon={PairIcon} label="Pair" size={32} selected />
|
|
||||||
<Tag icon={CreateIcon} label="Create" size={32} />
|
|
||||||
</XStack>
|
|
||||||
</XStack>
|
|
||||||
<Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
|
<Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
|
||||||
{isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
|
{isPaired ? <PairedSuccessfully /> : <GenerateId isAwaitingPairing={isAwaitingPairing} />}
|
||||||
{!isPaired && (
|
{!isPaired && (
|
||||||
|
|
Loading…
Reference in New Issue