pattern and version pickers using headlessUI

sites/lab/components/pattern-picker.js

@@ -1,47 +1,44 @@
 import React from 'react'
-import DesignIcon from 'shared/components/icons/design.js'
-import Link from 'next/link'
+import DesignIcon from 'shared/components/icons/design'
 import { useTranslation } from 'next-i18next'
+import {Picker, PickerLink} from 'shared/components/picker'
 
 const PatternPicker = ({ app }) => {
   const { t } = useTranslation(['common'])
 
-  return (
-      <div className="dropdown w-full md:w-auto">
-        <div tabIndex="0" className={`
-          m-0 btn btn-neutral flex flex-row gap-2 btn-outline
-          md:btn-ghost
-          hover:bg-neutral hover:border-neutral-content
-        `}>
-          <DesignIcon />
-          <span>{t('designs')}</span>
-        </div>
-        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
-          {Object.keys(app.navigation).map(section => (
-            <React.Fragment key={section}>
-              <li className={`
-                capitalize font-bold text-base-content text-center
-                opacity-50 border-b2 my-2 border-base-content
-              `}>
-                  {t(app.navigation[section].__title)}
-              </li>
-              {Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__')).map(pattern => {
-                return (
-                <li key={pattern}>
-                  <Link href={app.navigation[section][pattern].__slug}>
-                    <button className="btn btn-ghost">
-                      <span className="text-base-content">
-                        {app.navigation[section][pattern].__title}
-                      </span>
-                    </button>
-                  </Link>
-                </li>
-              )})}
-            </React.Fragment>
-          ))}
-        </ul>
-      </div>
-  )
+  const pickerProps = {
+    Icon: DesignIcon,
+    title: t('designs'),
+    className: 'overflow-y-scroll navdrop'
+  }
+
+  return (<Picker {...pickerProps}>
+    {Object.keys(app.navigation).map(section => {
+      const sectionProps = {
+        selectedItem: t(app.navigation[section].__title),
+        isStatic: true
+      }
+      const sectionTitle = t(app.navigation[section].__title);
+      {return (<React.Fragment key={section}>
+        <li className={`
+          capitalize font-bold text-base-content text-center
+          opacity-50 border-b2 my-2 border-base-content
+          `} {...sectionProps}>
+          {sectionTitle}
+        </li>
+        {Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__')).map(pattern => {
+          const patternProps = {
+            href: app.navigation[section][pattern].__slug,
+            key: pattern
+          }
+
+          return (<PickerLink {...patternProps} >
+            <span className="sr-only">{sectionTitle}</span> {app.navigation[section][pattern].__title}
+          </PickerLink>)
+        })}
+      </React.Fragment>)}
+    })}
+  </Picker>)
 }
 
 export default PatternPicker