Update content dynamically

This commit is contained in:
Hristo Nedelkov 2023-08-25 11:42:25 +03:00
parent b8cc418ab5
commit ea6cfcb3a0
3 changed files with 52 additions and 34 deletions

View File

@ -4,27 +4,36 @@ import { Stack, XStack, YStack } from 'tamagui'
import AdvisoriesContent from './AdvisoriesContent'
type AdvisoryTopicsType = {
[key: string]: string
[key: string]: string[]
}
const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
const advisoryTopics: AdvisoryTopicsType = {
'Proof of Stake': 'This is content for Proof of Stake...',
Deposit: 'This is content for Deposit...',
'Key Management': 'This is content for Key Management...',
'Bad Behaviour':
'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing*. Running your validator keys simultaneously on two or more machines will result in slashing.* Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
Requirements: 'This is content for Requirements...',
Risks: 'This is content for Risks...',
'Proof of Stake': ['This is content for Proof of Stake...'],
Deposit: ['This is content for Deposit...'],
'Key Management': ['This is content for Key Management...'],
'Bad Behaviour': [
'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
'Running your validator keys simultaneously on two or more machines will result in slashing.',
'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
],
Requirements: ['This is content for Requirements...'],
Risks: ['This is content for Risks...'],
}
const Advicsories = () => {
const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
return (
<XStack justifyContent={'space-between'} space={'$10'} style={{ padding: '16px 32px' }}>
<YStack justifyContent={'space-between'} space={'$2'}>
<XStack
className={'layout-left'}
space={'$10'}
style={{ padding: '16px 32px' }}
marginBottom={'$20'}
width={'100%'}
>
<YStack space={'$2'}>
<Stack marginBottom="$6">
<Text size={27} weight={'semibold'}>
Advisories

View File

@ -1,31 +1,40 @@
import { Text } from '@status-im/components'
import { Link } from 'react-router-dom'
import { YStack } from 'tamagui'
import { Stack, YStack } from 'tamagui'
type AdvisoriesContentProps = {
title: string
content: string
content: string[]
}
const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
return (
<YStack justifyContent={'space-between'} space={'$2'}>
<Text size={27}>{title}</Text>
<Text size={13}>{content}</Text>
<Text size={13}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#484848' }}
>
The Ethereum consensus layer specification
</Link>
</Text>
<Text size={13} weight={'semibold'}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#2A4CF4', fontWeight: 'bold' }}
>
More on slashing risks
</Link>
</Text>
<YStack space={'$3'}>
<Stack style={{ marginBottom: '5%' }}>
<Text size={27} weight={400}>
{title}
</Text>
</Stack>
<YStack space={'$6'}>
{content.length &&
content.map(row => {
return <Text size={15}>{row}</Text>
})}
<Text size={15}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#484848' }}
>
The Ethereum consensus layer specification
</Link>
</Text>
<Text size={15} weight={'semibold'}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#2A4CF4', fontWeight: 'bold' }}
>
More on slashing risks
</Link>
</Text>
</YStack>
</YStack>
)
}

View File

@ -1,6 +1,6 @@
import { Text } from '@status-im/components'
import { XStack } from 'tamagui'
import SyncCard from './SyncCard'
// import SyncCard from './SyncCard'
const KeyGenerationHeader = () => {
return (
@ -9,8 +9,8 @@ const KeyGenerationHeader = () => {
Key Generation
</Text>
<XStack space={'$2'}>
<SyncCard synced={123.524} total={172.503} />
<SyncCard synced={123.524} total={172.503} />
{/* <SyncCard synced={123.524} total={172.503} />
<SyncCard synced={123.524} total={172.503} /> */}
</XStack>
</XStack>
)