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

sites/shared/components/picker.mjs

@@ -0,0 +1,82 @@
+import { forwardRef } from 'react'
+import { Menu } from '@headlessui/react'
+import Link from 'next/link'
+
+// FIXME: Is this even used at all?
+
+/** an accessible dropdown menu for use by picker components */
+export const Picker = ({ Icon, className, title, ariaLabel, iconOnly = false, children, end }) => {
+  return (
+    <Menu as="div" className={`w-auto relative`}>
+      <Menu.Button
+        className={
+          iconOnly
+            ? `btn btn-sm`
+            : `m-0 btn btn-neutral flex flex-row gap-2
+			hover:bg-neutral-focus
+			`
+        }
+        aria-label={ariaLabel}
+      >
+        <Icon />
+        {!iconOnly && <span>{title}</span>}
+      </Menu.Button>
+      <Menu.Items
+        as="ul"
+        className={`p-2 shadow menu bg-base-100 rounded-box w-52 ${className} absolute ${
+          end ? 'right-0' : 'left-0'
+        } top-full mt-1`}
+      >
+        {children}
+      </Menu.Items>
+    </Menu>
+  )
+}
+
+/** get the menu item's class based on whether it's active */
+const itemClass = (active) => 'btn btn-ghost ' + (active ? 'bg-base-200' : '')
+
+/**
+ * a menu item that has a link in it
+ *
+ * Expected Props:
+ ** href: the href for the link
+ ** locale?: the locale the link links to
+ * */
+export const PickerLink = (props) => {
+  return (
+    <li role="menuitem">
+      <Menu.Item>
+        {({ active }) => <ForwardLink active={active} {...props}></ForwardLink>}
+      </Menu.Item>
+    </li>
+  )
+}
+
+/**
+ * Necessary to have keyboard enter 'click' events passed to the link */
+const ForwardLink = forwardRef(({ href, locale, active, children, ...rest }, ref) => (
+  <Link
+    href={href}
+    locale={locale}
+    className={itemClass(active)}
+    {...rest}
+    role={undefined}
+    ref={ref}
+  >
+    <span className="text-base-content">{children}</span>
+  </Link>
+))
+
+/** a menu item that is a button */
+export const PickerButton = ({ onClick, children }) => {
+  return (
+    <Menu.Item as="li" onClick={onClick}>
+      {({ active }) => (
+        <button className={itemClass(active)}>
+          <span className="text-base-content">{children}</span>
+        </button>
+      )}
+    </Menu.Item>
+  )
+}