status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Separate content from dashboard component

This commit is contained in:
Hristo Nedelkov 2023-10-17 14:39:19 +03:00
parent 559613850c
commit 84061ba5da
2 changed files with 72 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/Dashboard/Dashboard.tsx
View File

@ -1,71 +1,15 @@
import { XStack, YStack } from 'tamagui'
import { XStack } from 'tamagui'
import LeftSidebar from './LeftSidebar'
import RightSidebar from './RightSideBar/RightSidebar'
import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
import BalanceChartCard from './BalanceChartCard/BalanceChartCard'
import CPUCard from './CPULoad/CPUCard'
import ConsensusUptimeCard from './ConsensusUptime/ConsensusUptimeCard'
import ExecutionUptime from './ExecutionUptime/ExecutionUptime'
import DeviceUptime from './DeviceUptime/DeviceUptime'
import TitleLogo from './TitleLogo'
import StorageCard from './StorageCard/StorageCard'
import NetworkCard from './NetworkCard/NetworkCard'
import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
import MemoryCard from './MemoryCard/MemoryCard'
import { Stack } from 'tamagui'
import DashboardContent from './DashboardContent'
const Dashboard = () => {
return (
<XStack >
<LeftSidebar />
<YStack
space={'$4'}
alignItems="start"
px="24px"
style={{ flexGrow: '1', marginTop: '16px', width: '50%' }}
minWidth={'500px'}
>
<TitleLogo />
<XStack space={'$4'} justifyContent={'space-between'} flexWrap='wrap'>
<XStack space={'$4'} flexWrap="wrap" >
<SyncStatusCard />
<AddCardsContainer />
</XStack>
<BalanceChartCard />
</XStack>
<BasicInfoCards />
<XStack space="$3" flexWrap="wrap" >
<YStack space={'$4'} flexWrap="wrap">
<XStack justifyContent="space-between" flexWrap="wrap">
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<YStack space={'$4'} flexWrap="wrap">
<XStack space="$4">
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack>
<XStack space="$4" >
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</XStack>
</YStack>
</XStack>
</YStack>
<RightSidebar />
</XStack>
)
}
const Dashboard = () => (
<XStack style={{ height: '100vh' }}>
<LeftSidebar />
<DashboardContent />
<RightSidebar />
</XStack>
);
export default Dashboard

63
src/pages/Dashboard/DashboardContent.tsx Normal file
View File

@ -0,0 +1,63 @@
import { XStack, YStack } from 'tamagui';
import BasicInfoCards from './BasicInfoCards/BasicInfoCards';
import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer';
import BalanceChartCard from './BalanceChartCard/BalanceChartCard';
import CPUCard from './CPULoad/CPUCard';
import ConsensusUptimeCard from './ConsensusUptime/ConsensusUptimeCard';
import ExecutionUptime from './ExecutionUptime/ExecutionUptime';
import DeviceUptime from './DeviceUptime/DeviceUptime';
import TitleLogo from './TitleLogo';
import StorageCard from './StorageCard/StorageCard';
import NetworkCard from './NetworkCard/NetworkCard';
import SyncStatusCard from './SyncStatusCards/SyncStatusCards';
import MemoryCard from './MemoryCard/MemoryCard';
const DashboardContent = () => (
<YStack
space="$4"
alignItems="start"
px="24px"
style={{
flexGrow: '1',
marginTop: '16px',
width: '50%',
overflowY: 'auto',
maxHeight: '100vh'
}}
minWidth="500px"
>
<TitleLogo />
<XStack space="$4" justifyContent="space-between" flexWrap="wrap">
<XStack space="$4" flexWrap="wrap">
<SyncStatusCard />
<AddCardsContainer />
</XStack>
<BalanceChartCard />
</XStack>
<BasicInfoCards />
<XStack space="$3" flexWrap="wrap" >
<YStack space={'$4'} flexWrap="wrap">
<XStack justifyContent="space-between" flexWrap="wrap">
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<YStack space={'$4'} flexWrap="wrap">
<XStack space="$4">
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack>
<XStack space="$4" >
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</XStack>
</YStack>
</XStack>
</YStack>
);
export default DashboardContent