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

sites/org/components/mdx/pattern-options.mjs

@@ -0,0 +1,64 @@
+import { configs } from 'shared/designs/index.js'
+import { useTranslation } from 'next-i18next'
+import PageLink from 'shared/components/page-link.js'
+
+const renderOptions = (groups, pattern, t) => {
+  const list = []
+  for (let l1 in groups) {
+    let children = []
+    for (let l2 of groups[l1]) {
+      if (typeof l2 === 'string') {
+        children.push(
+          <li key={pattern + l2}>
+            <PageLink
+              href={`/docs/patterns/${pattern}/options/${l2.toLowerCase()}`}
+              txt={t(`o_${pattern}:${l2}.t`)}
+            />
+          </li>
+        )
+      } else {
+        for (let l3 in l2) {
+          let grandchildren = []
+          for (let l4 of l2[l3]) {
+            grandchildren.push(
+              <li key={pattern + l4}>
+                <PageLink
+                  href={`/docs/patterns/${pattern}/options/${l4.toLowerCase()}`}
+                  txt={t(`o_${pattern}:${l4}.t`)}
+                />
+              </li>
+            )
+          }
+          children.push(
+            <li key={pattern + l3}>
+              <span className="capitalize font-bold">{t(`og:${l3}`)}</span>
+              <ul className="list list-disc list-inside ml-4">{grandchildren}</ul>
+            </li>
+          )
+        }
+      }
+    }
+    list.push(
+      <li key={pattern + l1}>
+        <span className="capitalize font-bold">{t(`og:${l1}`)}</span>
+        <ul className="list list-disc list-inside ml-4">{children}</ul>
+      </li>
+    )
+  }
+
+  return <ul className="list list-disc list-inside ml-4">{list}</ul>
+}
+
+const PatternOptions = ({ pattern, before = null, after = null }) => {
+  const { t } = useTranslation([`o_${pattern}`, 'og'])
+
+  return (
+    <div>
+      {before}
+      {renderOptions(configs[pattern].optionGroups, pattern, t)}
+      {after}
+    </div>
+  )
+}
+
+export default PatternOptions