Implement cards
This commit is contained in:
Hristo Nedelkov
parent
aaeba9b91c
commit
584554a1d5
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="16/token" clip-path="url(#clip0_101_177067)">
|
||||
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M2.0999 8.00002C2.0999 4.74154 4.74142 2.10002 7.9999 2.10002C11.2584 2.10002 13.8999 4.74154 13.8999 8.00002C13.8999 11.2585 11.2584 13.9 7.9999 13.9C4.74142 13.9 2.0999 11.2585 2.0999 8.00002ZM7.9999 0.900024C4.07868 0.900024 0.899902 4.0788 0.899902 8.00002C0.899902 11.9212 4.07868 15.1 7.9999 15.1C11.9211 15.1 15.0999 11.9212 15.0999 8.00002C15.0999 4.0788 11.9211 0.900024 7.9999 0.900024ZM7.31034 5.76572C7.64449 5.59963 8.00358 5.55901 8.34841 5.64132C8.69532 5.72413 9.03172 5.93274 9.30682 6.26287L10.2287 5.49464C9.80453 4.98565 9.25002 4.62282 8.62702 4.47411L8.59999 4.46781V3.50007H7.39999V4.46782C7.18648 4.5165 6.97733 4.59119 6.77622 4.69115C6.19937 4.97788 5.7242 5.45404 5.3971 6.04147C5.07015 6.62866 4.89999 7.30995 4.89999 8.00008C4.89999 8.6902 5.07015 9.37149 5.3971 9.95868C5.7242 10.5461 6.19937 11.0223 6.77622 11.309C6.97725 11.4089 7.18632 11.4836 7.39975 11.5323V12.5001H8.59975V11.5324C8.60884 11.5303 8.61793 11.5282 8.62702 11.526C9.25002 11.3773 9.80453 11.0145 10.2287 10.5055L9.30682 9.73728C9.03172 10.0674 8.69532 10.276 8.34841 10.3588C8.00358 10.4411 7.64449 10.4005 7.31034 10.2344C6.97357 10.067 6.66784 9.77415 6.44553 9.3749C6.22308 8.97539 6.09999 8.49664 6.09999 8.00008C6.09999 7.50351 6.22308 7.02476 6.44553 6.62525C6.66784 6.226 6.97357 5.93312 7.31034 5.76572Z" fill="#647084"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_101_177067">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="93" height="46" viewBox="0 0 93 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M69.75 23.0001V46C56.9658 46 50.375 44.8503 42.625 34.5002C34.875 24.1502 29.8681 22.9999 23.25 22.9999V46H0V22.9999H23.25V9.06453e-09C35.1786 -1.88392e-08 42.625 1.53334 50.375 11.5001C58.125 21.4668 62.2115 23.0001 69.75 23.0001V0H93V23.0001H69.75Z" fill="#FF6161"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 393 B |
|
|
@ -0,0 +1,76 @@
|
|||
import IconText from './IconText'
|
||||
import { Separator, XStack, YStack } from 'tamagui'
|
||||
import StandardGauge from './StandardGauge'
|
||||
import { Shadow, Text } from '@status-im/components'
|
||||
import Icon from './Icon'
|
||||
interface DeviceStorageHealthProps {
|
||||
synced: number
|
||||
total: number
|
||||
}
|
||||
const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, total }) => {
|
||||
const message = synced === total ? 'Synced all data' : 'Syncing'
|
||||
|
||||
const data = () => {
|
||||
return [
|
||||
{
|
||||
id: 'storage',
|
||||
label: 'Used',
|
||||
value: synced,
|
||||
color: '#E95460',
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
label: 'Free',
|
||||
value: total - synced,
|
||||
color: '#E7EAEE',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return (
|
||||
<Shadow
|
||||
variant="$2"
|
||||
style={{
|
||||
width: '632px',
|
||||
height: '155px',
|
||||
borderRadius: '16px',
|
||||
}}
|
||||
>
|
||||
<YStack>
|
||||
<XStack
|
||||
justifyContent="space-between"
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '44px',
|
||||
height: '181px',
|
||||
}}
|
||||
>
|
||||
<StandardGauge data={data()} />
|
||||
</div>
|
||||
<YStack space={'$3'}>
|
||||
<Text size={13} color="#09101C" weight={'semibold'}>
|
||||
Execution Client
|
||||
</Text>
|
||||
<Icon src="/icons/vector.svg" height={46} width={93}></Icon>
|
||||
</YStack>
|
||||
</XStack>
|
||||
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
|
||||
<XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText icon="/icons/token.svg">{message}</IconText>
|
||||
|
||||
<Text size={13}>123,424 / 170,000</Text>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</Shadow>
|
||||
)
|
||||
}
|
||||
|
||||
export default SyncStatusCardConsensus
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import IconText from './IconText'
|
||||
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
|
||||
import StandardGauge from './StandardGauge'
|
||||
import { Shadow, Text } from '@status-im/components'
|
||||
interface DeviceStorageHealthProps {
|
||||
synced: number
|
||||
total: number
|
||||
}
|
||||
const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, total }) => {
|
||||
const message = synced === total ? 'Synced all data' : 'Syncing'
|
||||
|
||||
const data = () => {
|
||||
return [
|
||||
{
|
||||
id: 'storage',
|
||||
label: 'Used',
|
||||
value: synced,
|
||||
color: '#E95460',
|
||||
},
|
||||
{
|
||||
id: 'storage',
|
||||
label: 'Free',
|
||||
value: total - synced,
|
||||
color: '#E7EAEE',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
return (
|
||||
<Shadow
|
||||
variant="$2"
|
||||
style={{
|
||||
width: '632px',
|
||||
height: '155px',
|
||||
borderRadius: '16px',
|
||||
}}
|
||||
>
|
||||
<YStack>
|
||||
<XStack
|
||||
justifyContent="space-between"
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '44px',
|
||||
height: '181px',
|
||||
}}
|
||||
>
|
||||
<StandardGauge data={data()} />
|
||||
</div>
|
||||
<YStack space={'$3'}>
|
||||
<Text size={13} color="#09101C" weight={'semibold'}>
|
||||
Execution Client
|
||||
</Text>
|
||||
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
|
||||
Geth
|
||||
</Paragraph>
|
||||
</YStack>
|
||||
</XStack>
|
||||
|
||||
<Separator borderColor={'#e3e3e3'} />
|
||||
|
||||
<XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
|
||||
<IconText icon="/icons/token.svg">{message}</IconText>
|
||||
|
||||
<Text size={13}>123,424 / 170,000</Text>
|
||||
</XStack>
|
||||
</YStack>
|
||||
</Shadow>
|
||||
)
|
||||
}
|
||||
|
||||
export default SyncStatusCardExecution
|
||||
|
|
@ -3,6 +3,8 @@ import LayoutComponent from '../../components/LayoutComponent'
|
|||
import NimbusLogo from '../../components/NimbusLogo'
|
||||
import Titles from '../../components/Titles'
|
||||
import { Button } from '@status-im/components'
|
||||
import SyncStatusCardExecution from '../../components/SyncStatusCardExecution'
|
||||
import SyncStatusCardConsensus from '../../components/SyncStatusCardConsensus'
|
||||
|
||||
const DeviceSyncStatus = () => {
|
||||
return (
|
||||
|
|
@ -34,6 +36,8 @@ const DeviceSyncStatusContent = () => {
|
|||
isAdvancedSettings={true}
|
||||
/>
|
||||
|
||||
<SyncStatusCardExecution synced={30} total={50} />
|
||||
<SyncStatusCardConsensus synced={30} total={50} />
|
||||
<Stack style={{ marginTop: '1rem' }}>
|
||||
<Button>Continue</Button>
|
||||
</Stack>
|
||||
|
|
|
|||
Loading…
Reference in New Issue