Added user file vote

src/components/upDownVote.js

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import styles from './upDownVote.module.css'
+
+export default function UpDownVote({
+  onUp,
+  onDown,
+  onClear,
+  upvotes,
+  downvotes,
+  userId,
+}) {
+  const upvoted = upvotes.includes(userId)
+  const downvoted = downvotes.includes(userId)
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.action}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!upvoted) {
+            onUp()
+          } else {
+            onClear()
+          }
+        }}
+      >
+        <div>👍</div>
+        <div className={`${upvoted && styles.voted}`}>{upvotes.length}</div>
+      </div>
+      <div
+        className={styles.action}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!downvoted) {
+            onDown()
+          } else {
+            onClear()
+          }
+        }}
+      >
+        <div>👎</div>
+        <div className={`${downvoted && styles.voted}`}>{downvotes.length}</div>
+      </div>
+    </div>
+  )
+}

src/components/upDownVote.module.css

@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+}
+
+.container > div {
+  display: flex;
+  align-items: center;
+}
+
+.container > div > * {
+  padding: 3px;
+}
+
+.action {
+  border-radius: 3px;
+}
+
+.action:hover {
+  background-color: #555;
+}
+
+.voted {
+  color: var(--text-color);
+}