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

Add event for window,innerWidth

This commit is contained in:
Hristo Nedelkov 2023-10-18 18:09:54 +03:00
parent b8772ae64d
commit dda4d3d7ac
1 changed files with 63 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/pages/Dashboard/DashboardContent.tsx
View File

@ -12,61 +12,75 @@ import StorageCard from './StorageCard/StorageCard'
import NetworkCard from './NetworkCard/NetworkCard' import NetworkCard from './NetworkCard/NetworkCard'
import SyncStatusCard from './SyncStatusCards/SyncStatusCards' import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
import MemoryCard from './MemoryCard/MemoryCard' import MemoryCard from './MemoryCard/MemoryCard'
const DashboardContent = () => ( import { useEffect, useState } from 'react'
<YStack const DashboardContent = () => {
space="$4" const [windowWidth, setWindowWidth] = useState(window.innerWidth);
alignItems="start"
px="24px" useEffect(() => {
style={{ const handleResize = () => {
flexGrow: '1', setWindowWidth(window.innerWidth);
marginTop: '16px', };
width: '50%',
overflowY: 'auto', window.addEventListener('resize', handleResize);
maxHeight: '100vh', return () => {
}} window.removeEventListener('resize', handleResize);
minWidth="500px" };
> }, []);
<TitleLogo /> return (
<YStack
space="$4"
alignItems="start"
px="24px"
style={{
flexGrow: '1',
marginTop: '16px',
overflowY: 'auto',
}}
minWidth="500px"
width="50vh"
>
<TitleLogo />
<div style={{
display: 'grid',
gridTemplateColumns: windowWidth < 1300 ? '0.5fr' : '25fr 25fr 90fr',
gap: '16px'
}}>
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '16px' // You can adjust this value as per your needs
}}>
<YStack space="$4">
<SyncStatusCard /> <SyncStatusCard />
<AddCardsContainer /> <AddCardsContainer />
</YStack>
<BalanceChartCard />
</div>
<BasicInfoCards /> <BalanceChartCard />
</div>
<XStack space="$3" > <BasicInfoCards />
<YStack space="$4">
<XStack justifyContent="space-between">
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<YStack space="$4" flexWrap="wrap"> <XStack space="$3" flexWrap='wrap' >
<XStack space="$4"> <YStack space="$4">
<StorageCard maxStorage={100} storage={82} /> <XStack justifyContent="space-between">
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <ConsensusUptimeCard />
</XStack> <ExecutionUptime />
<XStack space="$4"> </XStack>
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} /> <DeviceUptime />
<NetworkCard </YStack>
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]} <YStack space="$4" flexWrap="wrap">
/> <XStack space="$4">
</XStack> <StorageCard maxStorage={100} storage={82} />
</YStack> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack> </XStack>
</YStack> <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 export default DashboardContent