From f5e5d1d02a0daa0b0267f9c2e9b06c659e4cc558 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 15 Jun 2021 02:04:31 +0100
Subject: [PATCH] Add category card component

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

diff --git a/src/components/CategoryCard/index.tsx b/src/components/CategoryCard/index.tsx
new file mode 100644
index 0000000..44d9eff
--- /dev/null
+++ b/src/components/CategoryCard/index.tsx
@@ -0,0 +1,50 @@
+import { Box, Text } from '..';
+import { CategoryOutput } from '../../graphql/types';
+import { theme } from '../../themes';
+
+type CategoryCardProps = {
+  category: CategoryOutput;
+  selectable?: boolean;
+  selected?: boolean;
+  toggleSelect?: () => void;
+  color: 'client' | 'productOwner' | 'developer' | 'admin';
+};
+
+const CategoryCard = ({
+  category,
+  selectable = false,
+  selected = false,
+  toggleSelect = () => {},
+  color,
+}: CategoryCardProps) => {
+  return (
+    <Box
+      padding='10px'
+      background='white'
+      boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
+      border={selected ? `2px solid ${theme.colors[color].main}` : undefined}
+      onClick={selectable ? toggleSelect : () => {}}
+      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'>
+            {category.name}
+          </Text>
+        </Box>
+      </Box>
+      <Box display='flex' flexDirection='row' alignItems='center'>
+        <Box flexGrow='1'>
+          <Text variant='body'>{category.description}</Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default CategoryCard;