Add category card component

2026-05-02 02:30:29 +00:00 · 2021-06-15 02:04:31 +01:00
parent 40ed53a947
commit f5e5d1d02a
1 changed files with 50 additions and 0 deletions
@@ -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;