Style second page
This commit is contained in:
parent
b8aaa1e946
commit
77aa0334d3
|
@ -22,19 +22,16 @@ const advisoryTopics: AdvisoryTopicsType = {
|
||||||
|
|
||||||
const Advicsories = () => {
|
const Advicsories = () => {
|
||||||
const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
|
const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ValidatorBoxWrapper>
|
<ValidatorBoxWrapper>
|
||||||
<XStack
|
<XStack justifyContent={'space-between'} space={'$10'} style={{ padding: '16px 32px' }}>
|
||||||
justifyContent={'space-between'}
|
<YStack justifyContent={'space-between'} space={'$2'}>
|
||||||
className="layout-left"
|
<Stack marginBottom="$6">
|
||||||
space={10}
|
<Text size={27} weight={'semibold'}>
|
||||||
style={{ padding: '16px 32px' }}
|
Advisories
|
||||||
>
|
</Text>
|
||||||
<YStack>
|
|
||||||
<Stack>
|
|
||||||
<Text size={27}>Advisories</Text>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
{Object.keys(advisoryTopics).map((title, index) => (
|
{Object.keys(advisoryTopics).map((title, index) => (
|
||||||
<Stack
|
<Stack
|
||||||
|
@ -52,12 +49,10 @@ const Advicsories = () => {
|
||||||
</Stack>
|
</Stack>
|
||||||
))}
|
))}
|
||||||
</YStack>
|
</YStack>
|
||||||
<YStack>
|
<AdvisoriesContent
|
||||||
<AdvisoriesContent
|
title={selectedTitle}
|
||||||
title={selectedTitle}
|
content={advisoryTopics[selectedTitle]}
|
||||||
content={advisoryTopics[selectedTitle]}
|
></AdvisoriesContent>
|
||||||
></AdvisoriesContent>
|
|
||||||
</YStack>
|
|
||||||
</XStack>
|
</XStack>
|
||||||
</ValidatorBoxWrapper>
|
</ValidatorBoxWrapper>
|
||||||
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
|
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
import { Text } from '@status-im/components'
|
import { Text } from '@status-im/components'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
|
import { YStack } from 'tamagui'
|
||||||
type AdvisoriesContentProps = {
|
type AdvisoriesContentProps = {
|
||||||
title: string
|
title: string
|
||||||
content: string
|
content: string
|
||||||
}
|
}
|
||||||
const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
|
const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<YStack justifyContent={'space-between'} space={'$2'}>
|
||||||
<Text size={27}>{title}</Text>
|
<Text size={27}>{title}</Text>
|
||||||
<Text size={13}>{content}</Text>
|
<Text size={13}>{content}</Text>
|
||||||
<Text size={13}>
|
<Text size={13}>
|
||||||
|
@ -25,7 +26,7 @@ const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
|
||||||
More on slashing risks
|
More on slashing risks
|
||||||
</Link>
|
</Link>
|
||||||
</Text>
|
</Text>
|
||||||
</>
|
</YStack>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export default AdvisoriesContent
|
export default AdvisoriesContent
|
||||||
|
|
Loading…
Reference in New Issue