massive refactor toDrop cascadeStudio and add CadQuery + OpenSCAD

resolves #400

app/web/src/components/ProjectReactions/ProjectReactions.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import Tab from '@material-ui/core/Tab'
+import Tabs from '@material-ui/core/Tabs'
+import { Link, routes } from '@redwoodjs/router'
+import { countEmotes } from 'src/helpers/emote'
+import ImageUploader from 'src/components/ImageUploader/ImageUploader'
+
+const ProjectReactions = ({ reactions }) => {
+  const emotes = countEmotes(reactions)
+  const [tab, setTab] = useState(0)
+  const onTabChange = (_, newValue) => {
+    setTab(newValue)
+  }
+
+  return (
+    <div className="bg-gray-100 p-4 min-h-md rounded-lg shadow-lg">
+      <Tabs
+        value={tab}
+        onChange={onTabChange}
+        variant="scrollable"
+        scrollButtons="off"
+        textColor="primary"
+        indicatorColor="primary"
+      >
+        <Tab label="All" style={{ minWidth: 100 }} />
+        {emotes.map((emote, i) => (
+          <Tab
+            label={`${emote.emoji} ${emote.count}`}
+            key={`${emote.emoji}-${i}}`}
+            style={{ minWidth: 100 }}
+          />
+        ))}
+      </Tabs>
+      <ul>
+        {reactions
+          .filter((reaction) =>
+            tab === 0 ? true : reaction.emote === emotes[tab - 1].emoji
+          )
+          .map((reactionProject, i) => (
+            <li
+              className="flex flex-row justify-between p-3 items-center"
+              key={`${reactionProject.emote}-${i}}`}
+            >
+              <div className="flex items-center justify-center">
+                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0">
+                  <ImageUploader
+                    className=""
+                    aspectRatio={1}
+                    imageUrl={reactionProject.user?.image}
+                    width={50}
+                  />
+                </div>
+                <div className="ml-4 font-roboto">
+                  <div className="text-gray-800 font-normal text-md mb-1">
+                    <Link
+                      to={routes.user({
+                        userName: reactionProject.user?.userName,
+                      })}
+                    >
+                      {reactionProject.user?.userName}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <span>{reactionProject.emote}</span>
+              </div>
+            </li>
+          ))}
+      </ul>
+    </div>
+  )
+}
+
+export default ProjectReactions