Added todo table

src/components/todoStuff/todoCard.js

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import styles from './todoCard.module.css'
+
+const clickableTypes = ['todo', 'blocked', 'inprogress', 'testing']
+
+export default function TodoCard(props) {
+  const { categories, type, onClick, userId } = props
+  const { name, description, category, points, votes, id } = props.cardData
+  const clickable = clickableTypes.includes(type)
+  const voted = votes.includes(userId)
+
+  return (
+    <div
+      className={`${styles.card} ${clickable && styles.clickable} ${voted &&
+        styles.voted}`}
+      title={description}
+      onClick={() => {
+        if (clickable) {
+          onClick(id)
+        }
+      }}
+    >
+      <div className={styles.description}>
+        <span className={styles.id}>{`#${id}`}</span>
+        {name}
+      </div>
+      <div className={styles.category}>
+        <span
+          style={{
+            backgroundColor: categories[category].color,
+            color: 'white',
+            borderRadius: '2px',
+            padding: '0px 2px',
+          }}
+        >
+          {category}
+        </span>
+      </div>
+      <div className={styles.numbers}>
+        <div>
+          <div>{`Votes: ${votes.length}`}</div>
+        </div>
+        <div>{points}</div>
+      </div>
+    </div>
+  )
+}