From 7ba8c9109dcd22939573bd4f2079e8eeed9a638c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 28 Aug 2023 13:34:37 +0300
Subject: [PATCH] feat: create separated card for rec mechanism

---
 .../KeyGeneration/RecoveryMechanismCard.tsx   | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx
new file mode 100644
index 00000000..5e6018d8
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryMechanismCard.tsx
@@ -0,0 +1,32 @@
+import { Text } from '@status-im/components'
+
+type RecoveryMechanismProps = {
+  value: string
+  selectedRecoveryMechanism: string
+  handleRecoveryMechanismChange: (value: string) => void
+}
+
+const RecoveryMechanismCard = ({
+  value,
+  selectedRecoveryMechanism,
+  handleRecoveryMechanismChange,
+}: RecoveryMechanismProps) => {
+  return (
+    <div
+      style={{
+        border: `1px solid ${selectedRecoveryMechanism === value ? '#2A4AF566' : '#DCE0E5'}`,
+        borderRadius: '0.5rem',
+        padding: '6px 12px',
+        cursor: 'pointer',
+        backgroundColor: selectedRecoveryMechanism === value ? '#f4f6fe' : '#fff',
+      }}
+      onClick={() => handleRecoveryMechanismChange(value)}
+    >
+      <Text size={15} weight={'semibold'}>
+        {value}
+      </Text>
+    </div>
+  )
+}
+
+export default RecoveryMechanismCard