massive refactor toDrop cascadeStudio and add CadQuery + OpenSCAD

resolves #400

app/web/src/components/Projects/Projects.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react'
+import { Link, routes } from '@redwoodjs/router'
+
+import { countEmotes } from 'src/helpers/emote'
+import ImageUploader from 'src/components/ImageUploader'
+
+const ProjectsList = ({
+  projects,
+  shouldFilterProjectsWithoutImage = false,
+}) => {
+  // temporary filtering projects that don't have images until some kind of search is added and there are more things on the website
+  // it helps avoid the look of the website just being filled with dumby data.
+  // related issue-104
+  const filteredProjects = useMemo(
+    () =>
+      (shouldFilterProjectsWithoutImage
+        ? projects.filter(({ mainImage }) => mainImage)
+        : [...projects]
+      )
+        // sort should probably be done on the service, but the filtering is temp too
+        .sort(
+          (a, b) =>
+            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+        ),
+    [projects, shouldFilterProjectsWithoutImage]
+  )
+  return (
+    <section className="max-w-6xl mx-auto mt-8">
+      <ul
+        className="grid gap-x-8 gap-y-12 items-center mx-4 relative"
+        style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}
+      >
+        {filteredProjects.map(({ title, mainImage, user, Reaction }) => (
+          <li
+            className="rounded-lg shadow-md hover:shadow-lg mx-px transform hover:-translate-y-px transition-all duration-150"
+            key={`${user?.userName}--${title}`}
+          >
+            <Link
+              to={routes.project({
+                userName: user?.userName,
+                projectTitle: title,
+              })}
+            >
+              <div className="flex items-center p-2 bg-gray-200 border-gray-300 rounded-t-lg border-t border-l border-r">
+                <div className="w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow">
+                  <ImageUploader
+                    className=""
+                    aspectRatio={1}
+                    imageUrl={user?.image}
+                    width={50}
+                  />
+                </div>
+                <span className="font-ropa-sans ml-3 text-lg text-indigo-900">
+                  {title}
+                </span>
+              </div>
+              <div className="w-full overflow-hidden relative rounded-b-lg">
+                <ImageUploader
+                  className=""
+                  aspectRatio={1.4}
+                  imageUrl={mainImage}
+                  width={700}
+                />
+                <div
+                  className="absolute inset-0"
+                  style={{
+                    background:
+                      'linear-gradient(19.04deg, rgba(62, 44, 118, 0.46) 10.52%, rgba(60, 54, 107, 0) 40.02%)',
+                  }}
+                />
+              </div>
+              <div className="absolute inset-x-0 bottom-0 -mb-4 mr-4 flex justify-end">
+                {countEmotes(Reaction).map(({ emoji, count }) => (
+                  <div
+                    key={emoji}
+                    className="h-8 w-8 overflow-hidden ml-2 p-1 rounded-full bg-opacity-75 bg-gray-200 border border-gray-300 shadow-md flex items-center justify-between"
+                  >
+                    <div className="-ml-px text-sm w-1">{emoji}</div>
+                    <div className="text-sm pl-1 font-ropa-sans text-gray-800">
+                      {count}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+export default ProjectsList