WIP Segments defining

plausible · Oct 11, 2024 · 5947e73 · 5947e73
1 parent 71e9c64
commit 5947e73
Show file tree

Hide file tree

Showing 18 changed files with 424 additions and 458 deletions.
diff --git a/assets/js/dashboard/components/dropdown.tsx b/assets/js/dashboard/components/dropdown.tsx
@@ -18,32 +18,57 @@ import {
 export const ToggleDropdownButton = forwardRef<
   HTMLDivElement,
   {
+    variant?: 'ghost' | 'button'
+    className?: string
     currentOption: ReactNode
     children: ReactNode
     onClick: () => void
     dropdownContainerProps: AriaAttributes
   }
->(({ currentOption, children, onClick, dropdownContainerProps }, ref) => {
-  return (
-    <div className="min-w-32 md:w-48 md:relative" ref={ref}>
-      <button
-        onClick={onClick}
-        className="w-full flex items-center justify-between rounded bg-white dark:bg-gray-800 shadow px-2 md:px-3
-      py-2 leading-tight cursor-pointer text-xs md:text-sm text-gray-800
-      dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-900"
-        tabIndex={0}
-        aria-haspopup="true"
-        {...dropdownContainerProps}
-      >
-        <span className="truncate mr-1 md:mr-2">
-          <span className="font-medium">{currentOption}</span>
-        </span>
-        <ChevronDownIcon className="hidden sm:inline-block h-4 w-4 md:h-5 md:w-5 text-gray-500" />
-      </button>
-      {children}
-    </div>
-  )
-})
+>(
+  (
+    {
+      className,
+      currentOption,
+      children,
+      onClick,
+      dropdownContainerProps,
+      ...props
+    },
+    ref
+  ) => {
+    const { variant } = { variant: 'button', ...props }
+    const wrapperClass = { ghost: '', button: 'min-w-32 md:w-48 md:relative' }[
+      variant
+    ]
+    const sharedButtonClass =
+      'flex items-center rounded text-xs md:text-sm leading-tight px-2 py-2 md:px-3'
+    const buttonClass = {
+      ghost:
+        'text-gray-500 hover:text-gray-800 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-900',
+      button:
+        'w-full justify-between bg-white dark:bg-gray-800 shadow text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-900'
+    }[variant]
+
+    return (
+      <div className={classNames(wrapperClass, className)} ref={ref}>
+        <button
+          onClick={onClick}
+          className={classNames(sharedButtonClass, buttonClass)}
+          tabIndex={0}
+          aria-haspopup="true"
+          {...dropdownContainerProps}
+        >
+          <span className="truncate block font-medium">{currentOption}</span>
+          {variant === 'button' && (
+            <ChevronDownIcon className="hidden sm:inline-block h-4 w-4 md:h-5 md:w-5 ml-1 md:ml-2 text-gray-500" />
+          )}
+        </button>
+        {children}
+      </div>
+    )
+  }
+)
 
 export const DropdownMenuWrapper = forwardRef<
   HTMLDivElement,