status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-14 20:36:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create Device Uptime card

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-09-16 06:07:30 +03:00
parent b1b867df21
commit a755ad28a5
1 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx Normal file
View File

@ -0,0 +1,101 @@
import { Shadow, Text } from '@status-im/components';
import { Stack, XStack, YStack } from 'tamagui';
import UptimeChart from '../UptimeChart/UptimeChart';
import Icon from '../../../components/General/Icon';
const data: DataItem[] = [
{
name: 'Jan',
pv: 0,
pa: 0
},
{
name: 'Feb',
pv: 0,
pa: 0
},
{
name: 'Mar',
pv: 0,
pa: 0
},
{
name: 'Apr',
pv: 0,
pa: 0
},
{
name: 'May',
pv: 0,
pa: 0
},
{
name: 'Aug',
pv: 0,
pa: 0
},
{
name: 'Jun',
pv: 0,
pa: 0
},
{
name: 'Jul',
pv: 1,
pa: 0
},
{
name: 'Sep',
pv: 0,
pa: 0
},
{
name: 'Oct',
pv: 0,
pa: 0
},
{
name: 'Nov',
pv: 1,
pa: 1
},
{
name: 'Dec',
pv: 1,
pa: 1
},
];
interface DataItem {
name?: string;
pa: number;
pv: number;
}
const DeviceUptime = () => {
return (
<Shadow
variant="$2"
style={{
borderRadius: '16px',
}}
>
<YStack space={'$3'} width={'560px'} height={'156px'} padding={'$3'}>
<YStack>
<Text size={15} weight={'semibold'}> Device Uptime</Text>
<XStack style={{ alignItems: 'end', }} space={'$2'} >
<Text size={27} weight={'semibold'}>98%</Text>
<Icon src='/icons/positive.svg' width={13}></Icon>
<Text size={13} color="#E95460" >1.56%</Text>
</XStack>
</YStack>
<XStack height={'50%'} justifyContent="center" alignItems="center">
<Stack style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '504px', height: '100%' }}>
<UptimeChart data={data} />
</Stack>
</XStack>
</YStack>
</Shadow >
);
}
export default DeviceUptime;