style(dropdown): improve style class application

src/components/Common/Dropdown/index.tsx

@@ -18,21 +18,15 @@ const DropdownItem = ({
   buttonType = 'primary',
   ...props
 }: DropdownItemProps) => {
-  let styleClass = 'button-md text-white';
-
-  switch (buttonType) {
-    case 'ghost':
-      styleClass +=
-        ' bg-transparent rounded hover:bg-gradient-to-br from-indigo-600 to-purple-600 text-white focus:border-gray-500 focus:text-white';
-      break;
-    default:
-      styleClass +=
-        ' bg-indigo-600 rounded hover:bg-indigo-500 focus:border-indigo-700 focus:text-white';
-  }
   return (
     <Menu.Item>
       <a
-        className={`flex cursor-pointer items-center px-4 py-2 text-sm leading-5 focus:outline-none ${styleClass}`}
+        className={[
+          'button-md flex cursor-pointer items-center rounded px-4 py-2 text-sm leading-5 text-white focus:text-white focus:outline-none',
+          buttonType === 'ghost'
+            ? 'bg-transparent from-indigo-600 to-purple-600 hover:bg-gradient-to-br focus:border-gray-500'
+            : 'bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700',
+        ].join(' ')}
         {...props}
       >
         {children}
@@ -51,17 +45,6 @@ const DropdownItems = ({
   dropdownType,
   ...props
 }: DropdownItemsProps) => {
-  let dropdownClasses: string;
-
-  switch (dropdownType) {
-    case 'ghost':
-      dropdownClasses =
-        'bg-gray-800 border border-gray-700 bg-opacity-80 p-1 backdrop-blur';
-      break;
-    default:
-      dropdownClasses = 'bg-indigo-600 p-1';
-  }
-
   return (
     <Transition
       as={Fragment}
@@ -73,7 +56,13 @@ const DropdownItems = ({
       leaveTo="opacity-0 scale-95"
     >
       <Menu.Items
-        className={`absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md p-1 shadow-lg ${dropdownClasses} ${className}`}
+        className={[
+          'absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md p-1 shadow-lg',
+          dropdownType === 'ghost'
+            ? 'border border-gray-700 bg-gray-800 bg-opacity-80 backdrop-blur'
+            : 'bg-indigo-600',
+          className,
+        ].join(' ')}
         {...props}
       >
         <div className="py-1">{children}</div>
@@ -97,23 +86,18 @@ const Dropdown = ({
   ...props
 }: DropdownProps) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
-  let dropdownButtonClasses = 'button-md text-white border';
-
-  switch (buttonType) {
-    case 'ghost':
-      dropdownButtonClasses +=
-        ' bg-transparent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100';
-      break;
-    default:
-      dropdownButtonClasses +=
-        ' bg-indigo-600 border-indigo-500 bg-opacity-80 hover:bg-opacity-100 hover:border-indigo-500 active:bg-indigo-700 active:border-indigo-700 focus:ring-blue';
-  }
 
   return (
     <Menu as="div" className="relative z-10">
       <Menu.Button
         type="button"
-        className={` inline-flex h-full items-center space-x-2 rounded-md px-4 py-2 text-sm font-medium leading-5 transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none ${dropdownButtonClasses} ${className}`}
+        className={[
+          'button-md inline-flex h-full items-center space-x-2 rounded-md border px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none',
+          buttonType === 'ghost'
+            ? 'border-gray-600 bg-transparent hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
+            : 'focus:ring-blue border-indigo-500 bg-indigo-600 bg-opacity-80 hover:border-indigo-500 hover:bg-opacity-100 active:border-indigo-700 active:bg-indigo-700',
+          className,
+        ].join(' ')}
         ref={buttonRef}
         disabled={!children}
         {...props}