fix: leave only one component for every page
This commit is contained in:
RadoslavDimchev
parent
99a662570c
commit
91e7afd2a7
|
|
@ -12,107 +12,103 @@ import CreateIcon from './CreateIcon'
|
|||
import LabelInputField from './LabelInputField'
|
||||
|
||||
function ContentPage() {
|
||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||
const [portChecked, setPortChecked] = useState(false)
|
||||
|
||||
return (
|
||||
<PageWrapperShadow
|
||||
breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
|
||||
>
|
||||
<Content />
|
||||
<div className="container-inner connection-page">
|
||||
<header>
|
||||
<NimbusLogo />
|
||||
<XStack space={'$2'} alignItems="center">
|
||||
<Tag icon={ConnectIcon} label="Connect" size={32} selected />
|
||||
<Tag icon={PairIcon} label="Pair" size={32} />
|
||||
<Tag icon={CreateIcon} label="Create" size={32} />
|
||||
</XStack>
|
||||
</header>
|
||||
<article className="content">
|
||||
<section className="mb-1">
|
||||
<Titles
|
||||
title="Connect Device"
|
||||
subtitle="Configure your device to connect to the Nimbus Node Manager"
|
||||
/>
|
||||
</section>
|
||||
<section className="mb-1">
|
||||
<XStack
|
||||
width={'100%'}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
// media query
|
||||
$lg={{
|
||||
flexDirection: 'column',
|
||||
flexWrap: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<XStack width={'40%'}>
|
||||
<LabelInputField labelText="Beacon Address" placeholderText="something" />
|
||||
</XStack>
|
||||
<XStack width={'25%'}>
|
||||
<LabelInputField labelText="Beacon Node Port" placeholderText="5052" />
|
||||
</XStack>
|
||||
<XStack width={'25%'}>
|
||||
<LabelInputField labelText="Client Validator Port" placeholderText="5052" />
|
||||
</XStack>
|
||||
<YStack width={20}>
|
||||
<Checkbox
|
||||
id="port-checkbox"
|
||||
variant="outline"
|
||||
selected={portChecked}
|
||||
onCheckedChange={v => setPortChecked(v)}
|
||||
/>
|
||||
</YStack>
|
||||
</XStack>
|
||||
<XStack width={'100%'} alignItems="center">
|
||||
<LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
|
||||
</XStack>
|
||||
</section>
|
||||
<section className="mb-1">
|
||||
<YStack>
|
||||
<Text size={13} weight="regular" color={'#647084'}>
|
||||
Device Avatar
|
||||
</Text>
|
||||
<XStack my={10}>
|
||||
<Avatar type="user" size={80} name="Device Avatar" />
|
||||
</XStack>
|
||||
<XStack space>
|
||||
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
|
||||
<LabelInputField labelText="Device Color" placeholderText="#011892" />
|
||||
</XStack>
|
||||
</YStack>
|
||||
</section>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
<section className="my-1">
|
||||
<YStack>
|
||||
<Text size={19} weight="semibold">
|
||||
Settings
|
||||
</Text>
|
||||
</YStack>
|
||||
<XStack my={8} space={'$2'}>
|
||||
<Checkbox
|
||||
id="auto-connect"
|
||||
selected={autoConnectChecked}
|
||||
onCheckedChange={v => setAutoConnectChecked(v)}
|
||||
variant="outline"
|
||||
/>
|
||||
<Label htmlFor="auto-connect">
|
||||
<Text size={15} weight="regular">
|
||||
Auto Connect Device
|
||||
</Text>
|
||||
</Label>
|
||||
</XStack>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
</section>
|
||||
<StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
|
||||
</article>
|
||||
</div>
|
||||
</PageWrapperShadow>
|
||||
)
|
||||
}
|
||||
|
||||
function Content() {
|
||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||
const [portChecked, setPortChecked] = useState(false)
|
||||
return (
|
||||
<div className="container-inner connection-page">
|
||||
<header>
|
||||
<NimbusLogo />
|
||||
<XStack space={'$2'} alignItems="center">
|
||||
<Tag icon={ConnectIcon} label="Connect" size={32} selected />
|
||||
<Tag icon={PairIcon} label="Pair" size={32} />
|
||||
<Tag icon={CreateIcon} label="Create" size={32} />
|
||||
</XStack>
|
||||
</header>
|
||||
<article className="content">
|
||||
<section className="mb-1">
|
||||
<Titles
|
||||
title="Connect Device"
|
||||
subtitle="Configure your device to connect to the Nimbus Node Manager"
|
||||
/>
|
||||
</section>
|
||||
<section className="mb-1">
|
||||
<XStack
|
||||
width={'100%'}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
// media query
|
||||
$lg={{
|
||||
flexDirection: 'column',
|
||||
flexWrap: 'nowrap',
|
||||
}}
|
||||
>
|
||||
<XStack width={'40%'}>
|
||||
<LabelInputField labelText="Beacon Address" placeholderText="something" />
|
||||
</XStack>
|
||||
<XStack width={'25%'}>
|
||||
<LabelInputField labelText="Beacon Node Port" placeholderText="5052" />
|
||||
</XStack>
|
||||
<XStack width={'25%'}>
|
||||
<LabelInputField labelText="Client Validator Port" placeholderText="5052" />
|
||||
</XStack>
|
||||
<YStack width={20}>
|
||||
<Checkbox
|
||||
id="port-checkbox"
|
||||
variant="outline"
|
||||
selected={portChecked}
|
||||
onCheckedChange={v => setPortChecked(v)}
|
||||
/>
|
||||
</YStack>
|
||||
</XStack>
|
||||
<XStack width={'100%'} alignItems="center">
|
||||
<LabelInputField labelText="API Token" placeholderText="****_*****_*****" />
|
||||
</XStack>
|
||||
</section>
|
||||
<section className="mb-1">
|
||||
<YStack>
|
||||
<Text size={13} weight="regular" color={'#647084'}>
|
||||
Device Avatar
|
||||
</Text>
|
||||
<XStack my={10}>
|
||||
<Avatar type="user" size={80} name="Device Avatar" />
|
||||
</XStack>
|
||||
<XStack space>
|
||||
<LabelInputField labelText="Device Name" placeholderText="Stake and chips" />
|
||||
<LabelInputField labelText="Device Color" placeholderText="#011892" />
|
||||
</XStack>
|
||||
</YStack>
|
||||
</section>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
<section className="my-1">
|
||||
<YStack>
|
||||
<Text size={19} weight="semibold">
|
||||
Settings
|
||||
</Text>
|
||||
</YStack>
|
||||
<XStack my={8} space={'$2'}>
|
||||
<Checkbox
|
||||
id="auto-connect"
|
||||
selected={autoConnectChecked}
|
||||
onCheckedChange={v => setAutoConnectChecked(v)}
|
||||
variant="outline"
|
||||
/>
|
||||
<Label htmlFor="auto-connect">
|
||||
<Text size={15} weight="regular">
|
||||
Auto Connect Device
|
||||
</Text>
|
||||
</Label>
|
||||
</XStack>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
</section>
|
||||
<StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
|
||||
</article>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default ContentPage
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -13,55 +13,49 @@ import DeviceNetworkHealth from '../../components/DeviceNetworkHealth'
|
|||
const DeviceHealthCheck = () => {
|
||||
return (
|
||||
<PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
|
||||
<DeviceHealthCheckContent />
|
||||
<div className="container-inner landing-page">
|
||||
<YStack
|
||||
space={'$4'}
|
||||
style={{
|
||||
justifyContent: 'end',
|
||||
alignItems: 'start',
|
||||
marginBottom: '2rem',
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
>
|
||||
<NimbusLogo />
|
||||
<Titles
|
||||
title="Device Health Check"
|
||||
subtitle="Configure your device to start Staking on Nimbus"
|
||||
isAdvancedSettings={true}
|
||||
/>
|
||||
<XStack space={'$4'}>
|
||||
<DeviceStorageHealth storage={44} maxStorage={30} />
|
||||
<DeviceCPULoad load={[12, 123, 4, 90]} />
|
||||
</XStack>
|
||||
<XStack space={'$4'}>
|
||||
<DeviceMemory currentMemory={[25, 31, 5, 14, 20, 81]} maxMemory={38} />
|
||||
<DeviceNetworkHealth uploadRate={[1, 4, 23, 55]} downloadRate={[20, 3, 40, 56]} />
|
||||
</XStack>
|
||||
<HealthInfoSection
|
||||
usedStorage={120}
|
||||
maxStorage={160}
|
||||
usedRamMemory={8}
|
||||
maxRamMemory={16}
|
||||
cpuClockRate={2.5}
|
||||
networkLatency={75}
|
||||
/>
|
||||
<InformationBox
|
||||
icon={<Icon src="/icons/close.png" width={11} height={11} />}
|
||||
message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
|
||||
/>
|
||||
<Stack style={{ marginTop: '1rem' }}>
|
||||
<Button>Continue</Button>
|
||||
</Stack>
|
||||
</YStack>
|
||||
</div>
|
||||
</PageWrapperShadow>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeviceHealthCheck
|
||||
|
||||
const DeviceHealthCheckContent = () => {
|
||||
return (
|
||||
<div className="container-inner landing-page">
|
||||
<YStack
|
||||
space={'$4'}
|
||||
style={{
|
||||
justifyContent: 'end',
|
||||
alignItems: 'start',
|
||||
marginBottom: '2rem',
|
||||
maxWidth: '100%',
|
||||
}}
|
||||
>
|
||||
<NimbusLogo />
|
||||
<Titles
|
||||
title="Device Health Check"
|
||||
subtitle="Configure your device to start Staking on Nimbus"
|
||||
isAdvancedSettings={true}
|
||||
/>
|
||||
<XStack space={'$4'}>
|
||||
<DeviceStorageHealth storage={44} maxStorage={30} />
|
||||
<DeviceCPULoad load={[12, 123, 4, 90]} />
|
||||
</XStack>
|
||||
<XStack space={'$4'}>
|
||||
<DeviceMemory currentMemory={[25, 31, 5, 14, 20, 81]} maxMemory={38} />
|
||||
<DeviceNetworkHealth uploadRate={[1, 4, 23, 55]} downloadRate={[20, 3, 40, 56]} />
|
||||
</XStack>
|
||||
<HealthInfoSection
|
||||
usedStorage={120}
|
||||
maxStorage={160}
|
||||
usedRamMemory={8}
|
||||
maxRamMemory={16}
|
||||
cpuClockRate={2.5}
|
||||
networkLatency={75}
|
||||
/>
|
||||
<InformationBox
|
||||
icon={<Icon src="/icons/close.png" width={11} height={11} />}
|
||||
message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
|
||||
/>
|
||||
<Stack style={{ marginTop: '1rem' }}>
|
||||
<Button>Continue</Button>
|
||||
</Stack>
|
||||
</YStack>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue