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

format

This commit is contained in:
Hristo Nedelkov 2023-11-03 11:10:23 +02:00
parent 84be14300e
commit 6caf202e2e
2 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,19 +20,12 @@ const Dashboard = () => {
}, []) }, [])
return ( return (
<XStack style={{ height: '100vh' }} > <XStack style={{ height: '100vh' }}>
{windowWidth>900&& {windowWidth > 900 && <LeftSidebar />}
(
<LeftSidebar />
)}
<DashboardContent windowWidth={windowWidth} />
{windowWidth>900&&
(
<RightSidebar /> <DashboardContent windowWidth={windowWidth} />
)} {windowWidth > 900 && <RightSidebar />}
</XStack > </XStack>
) )
} }

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

@ -15,9 +15,8 @@ import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
import MemoryCard from './MemoryCard/MemoryCard' import MemoryCard from './MemoryCard/MemoryCard'
import { XStack } from 'tamagui' import { XStack } from 'tamagui'
type DashboardContentProps = { type DashboardContentProps = {
windowWidth: number; windowWidth: number
}
};
const DashboardContent = ({ windowWidth }: DashboardContentProps) => { const DashboardContent = ({ windowWidth }: DashboardContentProps) => {
return ( return (
<YStack <YStack
@ -57,9 +56,7 @@ const DashboardContent = ({ windowWidth }: DashboardContentProps) => {
<BasicInfoCards /> <BasicInfoCards />
{windowWidth < 1400 ? ( {windowWidth < 1400 ? (
DashboardContentLayout(windowWidth) DashboardContentLayout(windowWidth)
) : ( ) : (
<Stack <Stack
style={{ style={{
@ -103,7 +100,7 @@ const DashboardContent = ({ windowWidth }: DashboardContentProps) => {
} }
const DashboardContentLayout = (windowWidth: number) => { const DashboardContentLayout = (windowWidth: number) => {
return ( return (
<Stack width={'100%'} > <Stack width={'100%'}>
<YStack> <YStack>
<Stack <Stack
style={{ style={{
@ -117,11 +114,13 @@ const DashboardContentLayout = (windowWidth: number) => {
</Stack> </Stack>
<DeviceUptime /> <DeviceUptime />
</YStack> </YStack>
<Stack style={{ <Stack
display: 'grid', style={{
gridTemplateColumns: windowWidth < 1240 ? '1fr 1fr' : '1fr 1fr 1fr 1fr', display: 'grid',
gap: '8px', gridTemplateColumns: windowWidth < 1240 ? '1fr 1fr' : '1fr 1fr 1fr 1fr',
}}> gap: '8px',
}}
>
<StorageCard maxStorage={100} storage={82} /> <StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} /> <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
@ -134,6 +133,4 @@ const DashboardContentLayout = (windowWidth: number) => {
) )
} }
export default DashboardContent export default DashboardContent