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

sites/shared/components/lightbox.mjs

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+
+export const Lightbox = ({ cancel, children }) => {
+  const [box, setBox] = useState(false)
+
+  if (box)
+    return (
+      <div
+        className={`
+      fixed top-0 left-0 right-0 w-screen h-screen
+      bg-neutral bg-opacity-90 z-30
+      hover:cursor-zoom-out flex flex-col justify-center
+      `}
+        onClick={() => setBox(false)}
+      >
+        <div
+          className="m-auto text-neutral-content lightbox"
+          style={{
+            maxHeight: 'calc(100vh - 6rem)',
+            maxWidth: 'calc(100vw - 6rem)',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    )
+
+  return (
+    <div onClick={() => setBox(!box)} className="hover:cursor-zoom-in">
+      {children}
+    </div>
+  )
+}