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

fix: clean storage card for tests

This commit is contained in:
RadoslavDimchev 2023-09-18 19:22:52 +03:00
parent 085dc7027b
commit ebed17ce1d
1 changed files with 85 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/pages/Dashboard/StorageCard/StorageCard.tsx
View File

@ -1,97 +1,99 @@
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
import { IncorrectIcon } from '@status-im/icons'
import StandardGauge from '../../../components/Charts/StandardGauge'
import IconText from '../../../components/General/IconText'
import Icon from '../../../components/General/Icon'
type StorageCardProps = {
storage: number
maxStorage: number
storage: number
maxStorage: number
}
const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
const message = storage < maxStorage ? 'Good' : 'Poor'
const free = maxStorage - storage
const utilization = (storage / (maxStorage || 1)) * 100
const message = storage < maxStorage ? 'Good' : 'Poor'
const free = maxStorage - storage
const utilization = (storage / (maxStorage || 1)) * 100
const data = (free: number) => {
return [
{
id: 'storage',
label: 'Used',
value: storage,
color: '#E95460',
},
{
id: 'storage',
label: 'Free',
value: free,
color: '#E7EAEE',
},
]
}
const data = (free: number) => {
return [
{
id: 'storage',
label: 'Used',
value: storage,
color: '#E95460',
},
{
id: 'storage',
label: 'Free',
value: free,
color: '#E7EAEE',
},
]
}
return (
<Shadow
variant="$2"
style={{
width: '284px',
height: '136px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}}
return (
<Shadow
variant="$2"
style={{
width: '284px',
height: '136px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}}
>
<YStack>
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
position: 'relative',
}}
>
<YStack>
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
right: '44px',
width: '75px',
height: '75px',
}}
>
<StandardGauge data={data(free)} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
Storage
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
{storage} GB
</Paragraph>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<IconText
icon={
message === 'Good' ? (
<Icon src="icons/active.svg" width={16} />
) : (
<IncorrectIcon size={16} />
)
}
weight={'semibold'}
>
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
{utilization.toFixed(0)}% Utilization
</Text>
)}
</XStack>
</YStack>
</Shadow>
)
<div
style={{
position: 'absolute',
right: '44px',
width: '75px',
height: '75px',
}}
>
<StandardGauge data={data(free)} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
Storage
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
{storage} GB
</Paragraph>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<IconText
icon={
message === 'Good' ? (
<Icon src="icons/active.svg" width={16} />
) : (
<IncorrectIcon size={16} />
)
}
weight={'semibold'}
>
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
{utilization.toFixed(0)}% Utilization
</Text>
)}
</XStack>
</YStack>
</Shadow>
)
}
export default StorageCard