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 logic for cards 

Add alerts with icons
This commit is contained in:
Hristo Nedelkov 2023-08-09 15:21:46 +03:00
parent 9a5eed0d1c
commit f2cb3eaa7e
4 changed files with 125 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/LayoutComponent/LandingPage.tsx
View File

@ -1,7 +1,7 @@
import LayoutComponent from './LayoutComponent'
import './LandingPage.css'
import QuickStartBar from '../QuickStartBar/QuickStartBar'
import StatisticBox from '../StaticBox'
import DeviceCPULoad from '../deviceCPULoad'
function LandingPage() {
return (
@ -96,12 +96,7 @@ function Content() {
Discover Nodes
</button>
</article>
<StatisticBox
memory="45"
stateIcon="https://placehold.co/16x16"
stateText="Good performance"
title="Title of the box"
/>
<DeviceCPULoad />
</div>
)
}

72
src/components/StandardLineChart.tsx
View File

@ -1,67 +1,23 @@
import { ResponsiveLine } from '@nivo/line'
interface DataPoint {
x: string
y: number
}
const MyResponsiveLine = () => {
const data = [
{
id: 'japan',
color: '#8DC6BC',
data: [
{
x: '1',
y: 15,
},
{
x: '2',
y: 12,
},
{
x: '3',
y: 43,
},
{
x: '4',
y: 20,
},
{
x: '5',
y: 60,
},
{
x: '6',
y: 5,
},
{
x: '7',
y: 15,
},
{
x: '8',
y: 12,
},
{
x: '9',
y: 43,
},
{
x: '10',
y: 20,
},
{
x: '11',
y: 60,
},
{
x: '12',
y: 5,
},
],
},
]
interface Serie {
id: string
data: DataPoint[]
}
interface MyResponsiveLineProps {
data: Serie[]
}
const MyResponsiveLine = ({ data }: MyResponsiveLineProps) => {
return (
<ResponsiveLine
data={data}
margin={{ top: 0, right: 0, bottom: 0, left: -75 }}
xScale={{ type: 'linear', min: 0, max: 12 }}
xScale={{ type: 'linear', min: 1, max: 12 }}
yScale={{
type: 'linear',
min: 'auto',

63
src/components/StaticBox.tsx
View File

@ -1,63 +0,0 @@
import React, { ReactNode, CSSProperties } from 'react'
import MyResponsiveLine from './StandardLineChart'
import ShadowBox from './ShadowBox'
import IconText from './IconText'
import { Paragraph, Separator, Text, XStack, YStack } from 'tamagui'
interface StatisticBoxProps {
title: string
memory: string
stateIcon: string
stateText: string
additionalStateText?: string
children?: ReactNode
svgDataURL?: string
imageUrl?: string
style?: CSSProperties
}
const StatisticBox: React.FC<StatisticBoxProps> = ({
title,
memory,
stateIcon,
stateText,
additionalStateText,
children,
...props
}) => {
return (
<ShadowBox {...props} style={{ maxWidth: '284px', maxHeight: '136px' }}>
<YStack>
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
position: 'relative', // Make XStack a positioning context
}}
>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<MyResponsiveLine />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
{title}
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
{memory}
</Paragraph>
</YStack>
{children}
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<IconText icon={stateIcon}>{stateText}</IconText>
{additionalStateText && <Text color={'#E95460'}>{additionalStateText}</Text>}
</XStack>
</YStack>
</ShadowBox>
)
}
export default StatisticBox

109
src/components/deviceCPULoad.tsx Normal file
View File

@ -0,0 +1,109 @@
import { useState, useEffect } from 'react'
import MyResponsiveLine from './StandardLineChart'
import ShadowBox from './ShadowBox'
import IconText from './IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
const data = [
{
id: 'cpu',
color: '#8DC6BC',
data: [
{
x: '1',
y: 15,
},
{
x: '2',
y: 12,
},
{
x: '3',
y: 43,
},
{
x: '4',
y: 20,
},
{
x: '5',
y: 60,
},
{
x: '6',
y: 5,
},
{
x: '7',
y: 15,
},
{
x: '8',
y: 12,
},
{
x: '9',
y: 43,
},
{
x: '10',
y: 20,
},
{
x: '11',
y: 60,
},
{
x: '12',
y: 5,
},
],
},
]
const DeviceCPULoad = () => {
const [message, setMessage] = useState('')
const currentLoad = { y: 9 }
useEffect(() => {
currentLoad.y > 80 ? setMessage('Good') : setMessage('Poor')
}, [currentLoad])
console.log(currentLoad)
return (
<ShadowBox style={{ maxWidth: '284px', maxHeight: '136px' }}>
<YStack>
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
position: 'relative', // Make XStack a positioning context
}}
>
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<MyResponsiveLine data={data} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
CPU
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
{currentLoad.y} GB
</Paragraph>
</YStack>
{message}
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
{'Good'}
</IconText>
{/*THIS IS USED FOR ADDITIONAL TEXT <Text color={'#E95460'}>{'GOod'}</Text> */}
</XStack>
</YStack>
</ShadowBox>
)
}
export default DeviceCPULoad