Style second page

This commit is contained in:
Hristo Nedelkov 2023-08-25 09:42:57 +03:00
parent b8aaa1e946
commit 77aa0334d3
2 changed files with 14 additions and 18 deletions

View File

@ -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' }}>

View File

@ -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