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 state and change function to OSCards story

This commit is contained in:
RadoslavDimchev 2023-10-24 17:20:47 +03:00
parent b055122273
commit 91f308bcaa
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
View File

@ -1,4 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react' import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import OSCards from './OSCards' import OSCards from './OSCards'
import { MAC } from '../../../../constants' import { MAC } from '../../../../constants'
@ -15,9 +16,16 @@ const meta = {
export default meta export default meta
type Story = StoryObj<typeof meta> type Story = StoryObj<typeof meta>
export const Default: Story = { export const Default: Story = (args: { selectedOS: string }) => {
args: { const [selectedOS, setSelectedOS] = useState(args.selectedOS)
selectedOs: MAC,
handleOsCardClick: () => {}, const handleOSCardClick = (os: string) => {
}, setSelectedOS(os)
}
return <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
}
Default.args = {
selectedOS: MAC,
} }

6
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
View File

@ -20,10 +20,10 @@ const cards = [
type OSCardsProps = { type OSCardsProps = {
selectedOS: string selectedOS: string
handleOsCardClick: (os: string) => void handleOSCardClick: (os: string) => void
} }
const OSCards = ({ selectedOS, handleOsCardClick }: OSCardsProps) => { const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
return ( return (
<XStack justifyContent={'space-between'} my={'15px'}> <XStack justifyContent={'space-between'} my={'15px'}>
{cards.map(card => ( {cards.map(card => (
@ -32,7 +32,7 @@ const OSCards = ({ selectedOS, handleOsCardClick }: OSCardsProps) => {
icon={card.icon} icon={card.icon}
name={card.name} name={card.name}
isSelected={selectedOS === card.name} isSelected={selectedOS === card.name}
onClick={() => handleOsCardClick(card.name)} onClick={() => handleOSCardClick(card.name)}
/> />
))} ))}
</XStack> </XStack>

4
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
View File

@ -13,7 +13,7 @@ const ValidatorSetupInstall = () => {
const [selectedOS, setSelectedOS] = useState(MAC) const [selectedOS, setSelectedOS] = useState(MAC)
const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
const handleOsCardClick = (os: string) => { const handleOSCardClick = (os: string) => {
setSelectedOS(os) setSelectedOS(os)
} }
@ -36,7 +36,7 @@ const ValidatorSetupInstall = () => {
<Text size={15} color="#647084" weight={'regular'}> <Text size={15} color="#647084" weight={'regular'}>
{DOCUMENTATIONS[selectedClient].general} {DOCUMENTATIONS[selectedClient].general}
</Text> </Text>
<OSCards selectedOS={selectedOS} handleOsCardClick={handleOsCardClick} /> <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
<YStack space={'$2'}> <YStack space={'$2'}>
<Text size={19}>Package Managers</Text> <Text size={19}>Package Managers</Text>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>