From 89de97035de10b8e844387ea2f9490e518e470af Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 3 Jun 2021 23:45:09 +0100
Subject: [PATCH] Add backend feature card

---
 src/components/BackendFeatureCard/index.tsx | 36 +++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/BackendFeatureCard/index.tsx

diff --git a/src/components/BackendFeatureCard/index.tsx b/src/components/BackendFeatureCard/index.tsx
new file mode 100644
index 0000000..f23f512
--- /dev/null
+++ b/src/components/BackendFeatureCard/index.tsx
@@ -0,0 +1,36 @@
+import { Box, Text } from '..';
+import { Backend } from '../../assets';
+import { FeatureOutput } from '../../graphql/types';
+
+type BackendFeatureCardProps = {
+  feature: FeatureOutput;
+};
+
+const BackendFeatureCard = ({ feature }: BackendFeatureCardProps) => {
+  return (
+    <Box
+      padding='15px 10px'
+      background='white'
+      boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
+      display='grid'
+      gridTemplateRows='auto'
+      alignItems='center'
+      rowGap='10px'
+      borderRadius='10px'
+      cursor='pointer'
+    >
+      <Box display='flex' flexDirection='row' alignItems='center'>
+        <Box flexGrow='1'>
+          <Text variant='title' weight='bold'>
+            {feature.name}
+          </Text>
+        </Box>
+        <Box>
+          <Backend />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default BackendFeatureCard;