status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add new state to story and component

This commit is contained in:
RadoslavDimchev 2023-08-28 13:15:49 +03:00
parent 340b5f7dd6
commit 60d4cdc7e4
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.stories.ts
View File

@ -16,5 +16,8 @@ export default meta
type Story = StoryObj<typeof meta> type Story = StoryObj<typeof meta>
export const Page: Story = { export const Page: Story = {
args: {}, args: {
selectedRecoveryMechanism: 'Key Files',
handleRecoveryMechanismChange: () => {},
},
} }

44
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanism.tsx
View File

@ -1,29 +1,37 @@
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import { XStack } from 'tamagui' import { XStack } from 'tamagui'
import BorderBox from '../../../components/General/BorderBox' import RecoveryMechanismCard from './RecoveryMechanismCard'
const RecoveryMechanism = () => { type RecoveryMechanismProps = {
selectedRecoveryMechanism: string
handleRecoveryMechanismChange: (value: string) => void
}
const RecoveryMechanism = ({
selectedRecoveryMechanism,
handleRecoveryMechanismChange,
}: RecoveryMechanismProps) => {
return ( return (
<XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}> <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
<Text size={19} weight={'semibold'}> <Text size={19} weight={'semibold'}>
Select Recovery Mechanism Select Recovery Mechanism
</Text> </Text>
<XStack space={'$2'}> <XStack space={'$1'}>
<BorderBox> <RecoveryMechanismCard
<Text size={15} weight={'semibold'}> value="Key Files"
Key Files selectedRecoveryMechanism={selectedRecoveryMechanism}
</Text> handleRecoveryMechanismChange={handleRecoveryMechanismChange}
</BorderBox> />
<BorderBox> <RecoveryMechanismCard
<Text size={15} weight={'semibold'}> value="Recovery Phrase"
Recovery Phrase selectedRecoveryMechanism={selectedRecoveryMechanism}
</Text> handleRecoveryMechanismChange={handleRecoveryMechanismChange}
</BorderBox> />
<BorderBox> <RecoveryMechanismCard
<Text size={15} weight={'semibold'}> value="Both Key Files & Recovery Phrase"
Both Key Files & Recovery Phrase selectedRecoveryMechanism={selectedRecoveryMechanism}
</Text> handleRecoveryMechanismChange={handleRecoveryMechanismChange}
</BorderBox> />
</XStack> </XStack>
</XStack> </XStack>
) )