From 9088439f7b5837c9708977ae2be03def36633007 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sat, 4 Jun 2022 20:34:46 +0200
Subject: [PATCH] wip(org): Switched to worm component for footer

---
 packages/freesewing.org/components/footer.js  | 33 +++++++------------
 packages/freesewing.shared/components/worm.js | 32 ++++++++++++++++++
 2 files changed, 43 insertions(+), 22 deletions(-)
 create mode 100644 packages/freesewing.shared/components/worm.js

diff --git a/packages/freesewing.org/components/footer.js b/packages/freesewing.org/components/footer.js
index 8a82069635f..bb0a8186b3b 100644
--- a/packages/freesewing.org/components/footer.js
+++ b/packages/freesewing.org/components/footer.js
@@ -8,6 +8,7 @@ import { useTranslation } from 'next-i18next'
 import PageLink from 'shared/components/page-link'
 import DocsLink from 'shared/components/docs-link'
 import PinkedRibbon from 'shared/components/pinked-ribbon.js'
+import Worm from 'shared/components/worm.js'
 
 // Classes
 const link = "text-secondary font-bold hover:pointer hover:underline px-1"
@@ -262,34 +263,22 @@ const Footer = ({ app }) => {
         {translations.contributors[app.locale]}
       </p>
       <div className="p-4 pb-16 flex flex-row bg-neutral -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
-        {contributors.map(person => (
-          <a title={person.name} href={person.profile} className="m-auto" key={person.profile+person.name}>
-            <img
-              src={person.avatar_url} alt={`Avatar of ${person.name}`}
-              className="w-12 h-12 lg:w-16 lg:h-16 rounded-full border-2 border-secondary hover:border-accent"
-            />
-          </a>
-        ))}
+        <Worm list={contributors.map(item => ({
+          img: item.avatar_url,
+          title: item.name,
+          slug: item.profile
+        }))} />
       </div>
 
       <p className="text-center text-neutral-content text-sm px-2">
         {translations.patrons[app.locale]}
       </p>
       <div className="p-4 pb-16 flex flex-row bg-neutral -mt-2 z-0 gap-1 lg:gap-2 flex-wrap justify-around text-neutral-content lg:px-24">
-        {patrons.map(person => (
-          <a
-            title={person.name}
-            href={`https://freesewing.org/users/${person.username}`}
-            className="m-auto"
-            key={person.username}
-          >
-            <img
-              src={person.img}
-              alt={`Avatar of ${person.name}`}
-              className="w-12 h-12 lg:w-16 lg:h-16 rounded-full border-2 border-secondary hover:border-accent"
-            />
-          </a>
-        ))}
+        <Worm list={patrons.map(item => ({
+          img: item.img,
+          title: item.name,
+          slug: item.username
+        }))} />
       </div>
 
       <p className="text-center text-neutral-content text-sm px-2">
diff --git a/packages/freesewing.shared/components/worm.js b/packages/freesewing.shared/components/worm.js
new file mode 100644
index 00000000000..df8f320f044
--- /dev/null
+++ b/packages/freesewing.shared/components/worm.js
@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+const PreviewTile = ({ img, slug, title }) => (
+  <div
+    style={{ backgroundImage: `url(${img})`, backgroundSize: 'cover' }}
+    className={`
+      rounded-full inline-block border-neutral hover:border-0 shrink-0
+      border-4 hover:border w-12 h-12 -ml-4
+      md:w-14 md:h-14 md:-ml-4 md:border-6 md:hover:border-2
+      xl:w-20 xl:h-20 xl:-ml-6 xl:border-6 xl:hover:border-2
+      mb-2 xl:mb-4
+    `}
+  >
+    <Link href={`/showcase/${slug}`}>
+      <a className="w-12 h-12 block" title={title}/>
+    </Link>
+  </div>
+)
+
+const Worm = ({ list, size=20 }) => {
+  return (
+    <div className={`
+      flex flex-row flex-wrap items-center justify-center
+      -mr-8 pl-8 pr-8
+      md:-mr-12 md:pl-12
+    `}>
+      {list.map(item => <PreviewTile {...item} />)}
+    </div>
+  )
+}
+
+export default Worm