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

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

diff --git a/src/components/FrontendFeatureCard/index.tsx b/src/components/FrontendFeatureCard/index.tsx
new file mode 100644
index 0000000..5d11aac
--- /dev/null
+++ b/src/components/FrontendFeatureCard/index.tsx
@@ -0,0 +1,48 @@
+import { Box, Text } from '..';
+import { FeatureOutput } from '../../graphql/types';
+
+type FrontendFeatureCardProps = {
+  feature: FeatureOutput;
+};
+
+const FrontendFeatureCard = ({ feature }: FrontendFeatureCardProps) => {
+  return (
+    <Box
+      padding='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>
+      <Box
+        display='flex'
+        flexDirection='row'
+        alignItems='center'
+        justifyContent='space-between'
+        padding='5px 20px'
+      >
+        {feature.wireframes?.map((wireframe) => (
+          <img
+            src={wireframe.src}
+            alt={wireframe.name}
+            key={wireframe.id}
+            style={{ width: '100px', height: 'auto', marginRight: '10px' }}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default FrontendFeatureCard;