From 479750829b82e5c88644d901d7dfc38f600e4f1d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 16 Apr 2024 12:41:53 +0300
Subject: [PATCH] feat(panel-image): create separate component

---
 .../RightManagePanels/PanelImage.tsx          | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/pages/ManageValidator/RightManagePanels/PanelImage.tsx

diff --git a/src/pages/ManageValidator/RightManagePanels/PanelImage.tsx b/src/pages/ManageValidator/RightManagePanels/PanelImage.tsx
new file mode 100644
index 00000000..f9568c24
--- /dev/null
+++ b/src/pages/ManageValidator/RightManagePanels/PanelImage.tsx
@@ -0,0 +1,37 @@
+import { Text } from '@status-im/components'
+import { YStack } from 'tamagui'
+
+import { useWindowSize } from '../../../hooks/useWindowSize'
+import { MODAL_WIDTH } from '../../../constants'
+
+type PanelImageProps = {
+  imagePath: string
+  text: string
+}
+
+const PanelImage = ({ imagePath, text }: PanelImageProps) => {
+  const { width } = useWindowSize()
+  const isModalWidth = width < MODAL_WIDTH
+
+  return (
+    <YStack
+      space={'$3'}
+      style={{
+        alignItems: 'center',
+        textAlign: 'center',
+        marginBottom: '6px',
+      }}
+    >
+      <img
+        src={`/images/${imagePath}`}
+        alt={imagePath}
+        style={{ width: isModalWidth ? '200px' : '300px' }}
+      />
+      <div style={{ width: '73%' }}>
+        <Text size={15}>{text}</Text>
+      </div>
+    </YStack>
+  )
+}
+
+export default PanelImage