Implement second page logic

src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx

@@ -1,8 +1,21 @@
 import { Button, Shadow, Text } from '@status-im/components'
+import { useState } from 'react'
 import { Stack, XStack, YStack } from 'tamagui'
-import { Link } from 'react-router-dom'
+import AdvisoriesContent from './AdvisoriesContent'
 
 const Advicsories = () => {
+  const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
+
+  const advisoryTopics = {
+    '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 unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
   return (
     <>
       <Shadow
@@ -21,41 +34,30 @@ const Advicsories = () => {
           style={{ padding: '16px 32px' }}
         >
           <YStack>
-            <Text size={27}>Advisories</Text>
-            <Text size={15}>① Proof of Stake</Text>
-            <Text size={15}>② Deposit</Text>
-            <Text size={15}>③ Key Management</Text>
-            <Text size={15} color="blue">
-              ④ Bad Behaviour
-            </Text>
-            <Text size={15}>⑤ Requirements</Text>
-            <Text size={15}>⑤ Risks</Text>
+            <Stack>
+              <Text size={27}>Advisories</Text>
+            </Stack>
+            {Object.keys(advisoryTopics).map((title, index) => (
+              <Stack
+                key={title}
+                onPress={() => setSelectedTitle(title)}
+                style={{ cursor: 'pointer' }}
+              >
+                <Text
+                  size={15}
+                  weight={selectedTitle === title && 'semibold'}
+                  color={selectedTitle === title ? 'blue' : undefined}
+                >
+                  {unicodeNumbers[index]} {title}
+                </Text>
+              </Stack>
+            ))}
           </YStack>
           <YStack>
-            <Text size={27}>Bad Behaviour</Text>
-            <Text size={13}>
-              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.
-            </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>
+            <AdvisoriesContent
+              title={selectedTitle}
+              content={advisoryTopics[selectedTitle]}
+            ></AdvisoriesContent>
           </YStack>
         </XStack>
       </Shadow>

src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx

@@ -0,0 +1,31 @@
+import { Text } from '@status-im/components'
+import { Link } from 'react-router-dom'
+type AdvisoriesContentProps = {
+  title: string
+  content: string
+}
+const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+export default AdvisoriesContent