fix: delete old connect device page and story
This commit is contained in:
RadoslavDimchev
parent
364452590b
commit
918ec5c629
|
|
@ -1,21 +0,0 @@
|
|||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import ConnectDevicePage from './ConnectDevicePage'
|
||||
import { withRouter } from 'storybook-addon-react-router-v6'
|
||||
|
||||
const meta = {
|
||||
title: 'Connect-Device/ConnectDevicePage',
|
||||
component: ConnectDevicePage,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
decorators: [withRouter],
|
||||
} satisfies Meta<typeof ConnectDevicePage>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Page: Story = {
|
||||
args: {},
|
||||
}
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import BreadcrumbBar from '../../components/General/BreadcrumbBar/BreadcrumbBar'
|
||||
import { Button as StatusButton, Text, Avatar, Checkbox } from '@status-im/components'
|
||||
import { Article, Label, Separator, Stack, XStack, YStack } from 'tamagui'
|
||||
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
|
||||
import Titles from '../../components/General/Titles'
|
||||
import LabelInputField from '../../components/General/LabelInputField'
|
||||
import Header from '../../components/General/Header'
|
||||
import { NodeIcon } from '@status-im/icons'
|
||||
|
||||
const ConnectDevicePage = () => {
|
||||
const [autoConnectChecked, setAutoConnectChecked] = useState(false)
|
||||
const [portChecked, setPortChecked] = useState(false)
|
||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setWindowWidth(window.innerWidth)
|
||||
}
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => window.removeEventListener('resize', handleResize)
|
||||
}, [])
|
||||
|
||||
const breakpoint = 768
|
||||
|
||||
const responsiveXStackStyle = {
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
flexDirection: windowWidth <= breakpoint ? 'column' : 'row',
|
||||
flexWrap: windowWidth <= breakpoint ? 'wrap' : 'nowrap',
|
||||
}
|
||||
|
||||
const responsiveInputStyle = {
|
||||
width: windowWidth <= breakpoint ? '100%' : '40%',
|
||||
marginBottom: windowWidth <= breakpoint ? '1rem' : '0',
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapperShadow
|
||||
breadcrumbBar={<BreadcrumbBar breadcrumbList={['Nodes', 'Nimbus', 'Connect Device']} />}
|
||||
rightImageSrc="./background-images/day-night-bg.png"
|
||||
rightImageLogo={true}
|
||||
>
|
||||
<YStack space={'$3'}>
|
||||
<Header selectedTag="Pair" />
|
||||
<Article className="content">
|
||||
<Titles
|
||||
title="Connect Device"
|
||||
subtitle="Configure your device to connect to the Nimbus Node Manager"
|
||||
/>
|
||||
<YStack my={16}>
|
||||
<XStack style={responsiveXStackStyle}>
|
||||
<Stack style={responsiveInputStyle}>
|
||||
<LabelInputField labelText="Beacon Address" placeholderText="something" />
|
||||
</Stack>
|
||||
<Stack style={responsiveInputStyle}>
|
||||
<LabelInputField labelText="Beacon Node Port" placeholderText="5052" />
|
||||
</Stack>
|
||||
<Stack style={responsiveInputStyle}>
|
||||
<LabelInputField labelText="Client Validator Port" placeholderText="5052" />
|
||||
</Stack>
|
||||
|
||||
<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>
|
||||
</YStack>
|
||||
<YStack my={16}>
|
||||
<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>
|
||||
</YStack>
|
||||
<Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
|
||||
<YStack my={16}>
|
||||
<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'} />
|
||||
</YStack>
|
||||
<StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
|
||||
</Article>
|
||||
</YStack>
|
||||
</PageWrapperShadow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConnectDevicePage
|
||||
Loading…
Reference in New Issue