From d8793c48b16e0deea7ab92b5702944be681b9ec6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 23 Oct 2023 20:33:47 +0300
Subject: [PATCH] feat: create separated OS cards component

---
 .../ValidatorInstalling/OSCards.tsx           | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
new file mode 100644
index 00000000..21001422
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -0,0 +1,34 @@
+import { XStack } from 'tamagui'
+import { useState } from 'react'
+
+import OSCard from './OSCard'
+import { LINUX, WINDOWS } from '../../../../constants'
+
+const OSCards = () => {
+  const [selectedOs, setSelectedOs] = useState('MAC')
+
+  return (
+    <XStack justifyContent={'space-between'} my={'15px'}>
+      <OSCard
+        icon="/icons/apple-logo.svg"
+        name="MacOS"
+        isSelected={selectedOs === 'MAC'}
+        onClick={() => setSelectedOs('MAC')}
+      />
+      <OSCard
+        icon="/icons/linux-logo.svg"
+        name={LINUX}
+        isSelected={selectedOs === LINUX}
+        onClick={() => setSelectedOs(LINUX)}
+      />
+      <OSCard
+        icon="/icons/windows-logo.svg"
+        name={WINDOWS}
+        isSelected={selectedOs === WINDOWS}
+        onClick={() => setSelectedOs(WINDOWS)}
+      />
+    </XStack>
+  )
+}
+
+export default OSCards