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

Make OS cards clickable

This commit is contained in:
Hristo Nedelkov 2023-08-29 00:50:17 +03:00
parent b6c73dcc74
commit 496614cb0e
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/ValidatorOnboarding/ValidatorSetup/OsCard.tsx
View File

@ -7,9 +7,10 @@ import { Text } from '@status-im/components'
type OsCardProps = { type OsCardProps = {
name: string name: string
icon: string icon: string
onClick?: () => void
isSelected?: boolean isSelected?: boolean
} }
const OsCard = ({ name, icon, isSelected }: OsCardProps) => { const OsCard = ({ name, icon, onClick, isSelected }: OsCardProps) => {
return ( return (
<YStack <YStack
style={{ style={{
@ -20,6 +21,7 @@ const OsCard = ({ name, icon, isSelected }: OsCardProps) => {
width: '30%', width: '30%',
}} }}
space={'$12'} space={'$12'}
onPress={onClick}
> >
<Stack> <Stack>
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>

24
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstall.tsx
View File

@ -3,8 +3,9 @@ import { InformationBox, Text } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons' import { CloseCircleIcon } from '@status-im/icons'
import OsCard from './OsCard' import OsCard from './OsCard'
import SyntaxHighlighterBox from './SyntaxHighlighter' import SyntaxHighlighterBox from './SyntaxHighlighter'
import { useState } from 'react'
const ValidatorSetupInstall = () => { const ValidatorSetupInstall = () => {
const [selectedOs, setSelectedOs] = useState('Mac')
return ( return (
<YStack style={{ width: '100%', padding: '16px 32px' }}> <YStack style={{ width: '100%', padding: '16px 32px' }}>
<XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}> <XStack justifyContent={'space-between'} style={{ marginBottom: '10px' }}>
@ -59,9 +60,24 @@ const ValidatorSetupInstall = () => {
</YStack> </YStack>
{/* Cards */} {/* Cards */}
<XStack justifyContent={'space-between'} space={'$3'} margin={'50px 0px'}> <XStack justifyContent={'space-between'} space={'$3'} margin={'50px 0px'}>
<OsCard icon="/icons/MAC.png" name="Mac" isSelected={true}></OsCard> <OsCard
<OsCard icon="/icons/Linux.png" name="Linux"></OsCard> icon="/icons/MAC.png"
<OsCard icon="/icons/windows.png" name="Windows"></OsCard> name="Mac"
isSelected={selectedOs === 'Mac'}
onClick={() => setSelectedOs('Mac')}
/>
<OsCard
icon="/icons/Linux.png"
name="Linux"
isSelected={selectedOs === 'Linux'}
onClick={() => setSelectedOs('Linux')}
/>
<OsCard
icon="/icons/windows.png"
name="Windows"
isSelected={selectedOs === 'Windows'}
onClick={() => setSelectedOs('Windows')}
/>
</XStack> </XStack>
<SyntaxHighlighterBox rows={['brew -v']}></SyntaxHighlighterBox> <SyntaxHighlighterBox rows={['brew -v']}></SyntaxHighlighterBox>
<Text size={13}> <Text size={13}>