feat(dashboard sidebar): create dashboard sidebar
This commit is contained in:
parent
4257111871
commit
d142b0cc61
|
@ -1,9 +1,9 @@
|
||||||
import { XStack } from 'tamagui'
|
import { XStack } from 'tamagui'
|
||||||
|
|
||||||
import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
|
import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
|
||||||
import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
|
|
||||||
import DashboardContent from './DashboardContent'
|
import DashboardContent from './DashboardContent'
|
||||||
import { useWindowSize } from '../../hooks/useWindowSize'
|
import { useWindowSize } from '../../hooks/useWindowSize'
|
||||||
|
import DashboardSidebar from './DashboardSidebar/DashboardSidebar'
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const { width } = useWindowSize()
|
const { width } = useWindowSize()
|
||||||
|
@ -11,7 +11,7 @@ const Dashboard = () => {
|
||||||
<XStack style={{ height: '100vh' }}>
|
<XStack style={{ height: '100vh' }}>
|
||||||
<LeftSidebar />
|
<LeftSidebar />
|
||||||
<DashboardContent />
|
<DashboardContent />
|
||||||
{width > 900 && <RightSidebar />}
|
{width > 900 && <DashboardSidebar />}
|
||||||
</XStack>
|
</XStack>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,61 @@
|
||||||
|
import { Avatar, Text } from '@status-im/components'
|
||||||
|
import { XStack, YStack } from 'tamagui'
|
||||||
|
import { CopyIcon } from '@status-im/icons'
|
||||||
|
|
||||||
|
import AlertsList from '../../../components/General/RightSideBar/AlertsList'
|
||||||
|
import LogsList from '../../../components/General/RightSideBar/LogsList'
|
||||||
|
|
||||||
|
import { copyFunction, getFormattedWalletAddress } from '../../../utilities'
|
||||||
|
import ValidatorsTabs from '../../../components/General/RightSideBar/ValidatorsTabs/ValidatorsTabs'
|
||||||
|
import ValidatorsCount from '../../../components/General/RightSideBar/ValidatorsCount'
|
||||||
|
import DashboardDiamondCard from './DashboardDiamondCard'
|
||||||
|
import AddValidatorButton from './AddValidatorButton'
|
||||||
|
|
||||||
|
const DashboardSidebar = () => {
|
||||||
|
const onCopyWalletAddress = () => {
|
||||||
|
copyFunction('0xb9dc35')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<YStack
|
||||||
|
width={'320px'}
|
||||||
|
space={'$3'}
|
||||||
|
backgroundColor={'#FFF'}
|
||||||
|
className={'transparent-scrollbar'}
|
||||||
|
style={{
|
||||||
|
padding: '8px',
|
||||||
|
border: '1px solid #F0F2F5',
|
||||||
|
height: '100vh',
|
||||||
|
overflowY: 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<XStack alignItems="center" space={'$2'}>
|
||||||
|
<Avatar type="user" size={32} name="Ethereum Mainnet" />
|
||||||
|
<YStack>
|
||||||
|
<Text size={15} weight={'semibold'}>
|
||||||
|
Ethereum Mainnet
|
||||||
|
</Text>
|
||||||
|
<XStack space={'$1'} alignItems="center">
|
||||||
|
<Text size={13}>{getFormattedWalletAddress('0xb9dc35')}</Text>
|
||||||
|
<CopyIcon
|
||||||
|
size={16}
|
||||||
|
color="#647084"
|
||||||
|
style={{ cursor: 'pointer' }}
|
||||||
|
onClick={onCopyWalletAddress}
|
||||||
|
/>
|
||||||
|
</XStack>
|
||||||
|
</YStack>
|
||||||
|
</XStack>
|
||||||
|
<XStack space={'$2'} alignItems="center" justifyContent="space-between">
|
||||||
|
<DashboardDiamondCard />
|
||||||
|
</XStack>
|
||||||
|
<ValidatorsCount />
|
||||||
|
<AddValidatorButton></AddValidatorButton>
|
||||||
|
<ValidatorsTabs />
|
||||||
|
<AlertsList />
|
||||||
|
<LogsList />
|
||||||
|
</YStack>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DashboardSidebar
|
Loading…
Reference in New Issue