feat: move selected os into parent component

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import OSCards from './OSCards'
+import { MAC } from '../../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/OSCards',
@@ -15,5 +16,8 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {},
+  args: {
+    selectedOs: MAC,
+    handleOsCardClick: () => {},
+  },
 }

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx

@@ -1,5 +1,4 @@
 import { XStack } from 'tamagui'
-import { useState } from 'react'
 
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
@@ -19,13 +18,12 @@ const cards = [
   },
 ]
 
-const OSCards = () => {
+type OSCardsProps = {
-  const [selectedOs, setSelectedOs] = useState(MAC)
+  selectedOs: string
-
+  handleOsCardClick: (os: string) => void
-  const handleOsCardClick = (os: string) => {
-    setSelectedOs(os)
 }
 
+const OSCards = ({ selectedOs, handleOsCardClick }: OSCardsProps) => {
   return (
     <XStack justifyContent={'space-between'} my={'15px'}>
       {cards.map(card => (

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx

@@ -1,15 +1,22 @@
 import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useSelector } from 'react-redux'
+import { useState } from 'react'
 
 import { RootState } from '../../../../redux/store'
 import SyntaxHighlighterBox from './SyntaxHighlighter'
 import OSCards from './OSCards'
 import { DOCUMENTATIONS } from './documentations'
+import { MAC } from '../../../../constants'
 
 const ValidatorSetupInstall = () => {
+  const [selectedOs, setSelectedOs] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
 
+  const handleOsCardClick = (os: string) => {
+    setSelectedOs(os)
+  }
+
   return (
     <YStack style={{ width: '100%', padding: '26px 32px' }}>
       <Text size={27} weight={'semibold'}>
@@ -29,7 +36,7 @@ const ValidatorSetupInstall = () => {
         <Text size={15} color="#647084" weight={'regular'}>
           {DOCUMENTATIONS[selectedClient].general}
         </Text>
-        <OSCards />
+        <OSCards selectedOs={selectedOs} handleOsCardClick={handleOsCardClick} />
         <YStack space={'$2'}>
           <Text size={19}>Package Managers</Text>
           <Text size={15} weight={'semibold'}>