chore(lab): Updated design picker

sites/lab/components/pattern-picker.js

@@ -1,44 +1,75 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import DesignIcon from 'shared/components/icons/design'
 import { useTranslation } from 'next-i18next'
-import {Picker, PickerLink} from 'shared/components/picker'
-
+import { Popover, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import Link from 'next/link'
 
 const PatternPicker = ({ app }) => {
   const { t } = useTranslation(['common'])
 
-  const sectionPatterns = (section) => Object.keys(app.navigation[section]).filter((p)=>!p.startsWith('__'))
+  const sectionPatterns = (section) =>
+    Object.keys(app.navigation[section]).filter((p) => !p.startsWith('__'))
 
-  const pickerProps = {
-    Icon: DesignIcon,
-    title: t('designs'),
-    className: 'overflow-y-scroll navdrop'
-  }
+  return (
+    <Popover className="relative">
+      {() => (
+        <>
+          <Popover.Button
+            className={`group inline-flex items-center px-3 py-2 text-base font-medium text-neural-content hover:bg-neutral-focus rounded-lg px-4`}
+          >
+            <DesignIcon />
+            <span className="ml-4 font-bold text-lg">{t('Designs')}</span>
+            <ChevronDownIcon
+              className={`ml-2 h-5 w-5 transition duration-150 ease-in-out group-hover:text-opacity-80`}
+              aria-hidden="true"
+            />
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
+              <div className="overflow-hidden rounded-lg shadow-lg">
+                <div className="relative grid gap-8 bg-base-100 p-7 lg:grid-cols-2">
+                  {Object.keys(app.navigation).map((section) => {
+                    const sectionTitle = t(app.navigation[section].__title)
 
-  return (<Picker {...pickerProps}>
-    {Object.keys(app.navigation).map(section => {
-      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
-          `}>
-          {sectionTitle}
-        </li>
-
-        {sectionPatterns(section).map(pattern => {
-          const patternProps = {
-            href: app.navigation[section][pattern].__slug
-          }
-
-          return (<PickerLink {...patternProps} key={pattern}>
-            <span className="sr-only" key={pattern}>{sectionTitle}</span> {app.navigation[section][pattern].__title}
-          </PickerLink>)
-        })}
-      </React.Fragment>)}
-    })}
-  </Picker>)
+                    return (
+                      <div
+                        key={sectionTitle}
+                        className="-m-3 flex rounded-lg p-2 transition duration-150 ease-in-out-50"
+                      >
+                        <div className="ml-4">
+                          <p className="text-lg font-medium text-base">{sectionTitle}</p>
+                          <ul className="flex flex-row flex-wrap">
+                            {sectionPatterns(section).map((pattern) => (
+                              <li key={pattern}>
+                                <Link href={app.navigation[section][pattern].__slug}>
+                                  <a className="capitalize pr-4 text-secondary hover:text-secondary-focus hover:underline">
+                                    {pattern}
+                                  </a>
+                                </Link>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  )
 }
 
 export default PatternPicker