feat(org): Ported components to mjs and named exports

sites/shared/components/worm.mjs

@@ -0,0 +1,48 @@
+import Link from 'next/link'
+
+const linkClasses = (fixed) =>
+  fixed
+    ? `w-16 h-16 aspect-square block`
+    : 'w-12 h-12 md:w-14 md:h-14 xl:w-20 xl:h-20 aspect-square block'
+
+const PreviewTile = ({ img, slug, title, href = false, fixed = false }) => (
+  <div
+    style={{
+      backgroundImage: `url(${img})`,
+      backgroundSize: 'cover',
+      width: fixed ? '4rem' : 'inherit',
+      height: fixed ? '4rem' : 'inherit',
+    }}
+    className={
+      'rounded-full border-base-200 ' +
+      'hover:border-0 shrink-0 border-4 hover:border aspect-square ' +
+      (fixed
+        ? `w-16 -ml-4 `
+        : `w-12 -ml-4
+            md:w-14 md:-ml-4 md:border-6 md:hover:border-2
+            xl:w-20 xl:-ml-6 xl:border-6 xl:hover:border-2
+            mb-2 xl:mb-4`)
+    }
+  >
+    {href ? (
+      <a href={href} title={title} className={linkClasses(fixed)} />
+    ) : (
+      <Link href={slug} title={title} className={linkClasses(fixed)}></Link>
+    )}
+  </div>
+)
+
+export const Worm = ({ list, fixed = false }) => {
+  return (
+    <div
+      className={
+        'flex flex-row flex-wrap items-center justify-center m-auto' +
+        (fixed ? '-mr-8 pl-8 pr-8' : '-mr-8 pl-8 pr-8 md:-mr-12 md:pl-12')
+      }
+    >
+      {list.map((item) => (
+        <PreviewTile {...item} fixed={fixed} />
+      ))}
+    </div>
+  )
+}