format
This commit is contained in:
parent
556c8475b3
commit
ff26094c43
|
@ -8,7 +8,7 @@ const AddCardsContainer = () => {
|
||||||
const cards = 2
|
const cards = 2
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardCardWrapper padding="0" minWidth='150px'>
|
<DashboardCardWrapper padding="0" minWidth="150px">
|
||||||
<YStack height={'100%'}>
|
<YStack height={'100%'}>
|
||||||
{Array.from({ length: cards }).map(() => (
|
{Array.from({ length: cards }).map(() => (
|
||||||
<AddCard style={{ padding: '56px', height: getHeightPercentages(cards) }} />
|
<AddCard style={{ padding: '56px', height: getHeightPercentages(cards) }} />
|
||||||
|
|
|
@ -37,8 +37,8 @@ const BalanceChartCard = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardCardWrapper minWidth={'536px'} maxHeight='300px' >
|
<DashboardCardWrapper minWidth={'536px'} maxHeight="300px">
|
||||||
<YStack space={'$4'} >
|
<YStack space={'$4'}>
|
||||||
<XStack justifyContent={'space-between'}>
|
<XStack justifyContent={'space-between'}>
|
||||||
<YStack>
|
<YStack>
|
||||||
<Text size={15} weight={'semibold'}>
|
<Text size={15} weight={'semibold'}>
|
||||||
|
|
|
@ -37,7 +37,7 @@ const LineChart = ({ years, userGains }: LineChartProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack width={'100%'} height={'75%'} >
|
<Stack width={'100%'} height={'75%'}>
|
||||||
<Line data={data} options={options} />
|
<Line data={data} options={options} />
|
||||||
</Stack>
|
</Stack>
|
||||||
)
|
)
|
||||||
|
|
|
@ -31,7 +31,7 @@ const DashboardCardWrapper = ({
|
||||||
backgroundColor: '$background',
|
backgroundColor: '$background',
|
||||||
minWidth: minWidth,
|
minWidth: minWidth,
|
||||||
maxWidth: maxWidth,
|
maxWidth: maxWidth,
|
||||||
maxHeight: maxHeight
|
maxHeight: maxHeight,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -14,18 +14,18 @@ import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
|
||||||
import MemoryCard from './MemoryCard/MemoryCard'
|
import MemoryCard from './MemoryCard/MemoryCard'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
const DashboardContent = () => {
|
const DashboardContent = () => {
|
||||||
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
const [windowWidth, setWindowWidth] = useState(window.innerWidth)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleResize = () => {
|
const handleResize = () => {
|
||||||
setWindowWidth(window.innerWidth);
|
setWindowWidth(window.innerWidth)
|
||||||
};
|
}
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize)
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('resize', handleResize);
|
window.removeEventListener('resize', handleResize)
|
||||||
};
|
}
|
||||||
}, []);
|
}, [])
|
||||||
return (
|
return (
|
||||||
<YStack
|
<YStack
|
||||||
space="$4"
|
space="$4"
|
||||||
|
@ -41,12 +41,13 @@ const DashboardContent = () => {
|
||||||
>
|
>
|
||||||
<TitleLogo />
|
<TitleLogo />
|
||||||
|
|
||||||
<div style={{
|
<div
|
||||||
display: 'grid',
|
style={{
|
||||||
gridTemplateColumns: windowWidth < 1300 ? '0.5fr' : '25fr 25fr 90fr',
|
display: 'grid',
|
||||||
gap: '16px'
|
gridTemplateColumns: windowWidth < 1300 ? '0.5fr' : '25fr 25fr 90fr',
|
||||||
}}>
|
gap: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<SyncStatusCard />
|
<SyncStatusCard />
|
||||||
<AddCardsContainer />
|
<AddCardsContainer />
|
||||||
|
|
||||||
|
@ -55,7 +56,7 @@ const DashboardContent = () => {
|
||||||
|
|
||||||
<BasicInfoCards />
|
<BasicInfoCards />
|
||||||
|
|
||||||
<XStack space="$3" flexWrap='wrap' >
|
<XStack space="$3" flexWrap="wrap">
|
||||||
<YStack space="$4">
|
<YStack space="$4">
|
||||||
<XStack justifyContent="space-between">
|
<XStack justifyContent="space-between">
|
||||||
<ConsensusUptimeCard />
|
<ConsensusUptimeCard />
|
||||||
|
@ -83,4 +84,3 @@ const DashboardContent = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default DashboardContent
|
export default DashboardContent
|
||||||
|
|
||||||
|
|
|
@ -28,8 +28,8 @@ const DeviceUptime = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DashboardCardWrapper maxHeight='350px'>
|
<DashboardCardWrapper maxHeight="350px">
|
||||||
<YStack space={'$3'} >
|
<YStack space={'$3'}>
|
||||||
<XStack justifyContent={'space-between'}>
|
<XStack justifyContent={'space-between'}>
|
||||||
<YStack>
|
<YStack>
|
||||||
<Text size={15} weight={'semibold'}>
|
<Text size={15} weight={'semibold'}>
|
||||||
|
|
|
@ -14,7 +14,7 @@ const ExecutionUptime = () => {
|
||||||
minWidth: '260px',
|
minWidth: '260px',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<YStack space={'$3'} minHeight={'156px'} padding={'$3'}>
|
<YStack space={'$3'} minHeight={'156px'} padding={'$3'}>
|
||||||
<YStack>
|
<YStack>
|
||||||
<Text size={15} weight={'semibold'}>
|
<Text size={15} weight={'semibold'}>
|
||||||
Execution Uptime
|
Execution Uptime
|
||||||
|
|
|
@ -7,7 +7,7 @@ import ConsensusCard from './ConsensusClientCard'
|
||||||
|
|
||||||
const SyncStatusCard = () => {
|
const SyncStatusCard = () => {
|
||||||
return (
|
return (
|
||||||
<DashboardCardWrapper padding="0" minWidth='250px'>
|
<DashboardCardWrapper padding="0" minWidth="250px">
|
||||||
<YStack space={'$2'}>
|
<YStack space={'$2'}>
|
||||||
<Stack style={{ paddingTop: '12px', paddingLeft: '16px' }}>
|
<Stack style={{ paddingTop: '12px', paddingLeft: '16px' }}>
|
||||||
<Text size={15} weight={'semibold'}>
|
<Text size={15} weight={'semibold'}>
|
||||||
|
|
Loading…
Reference in New Issue