Fix DropDown in ApiMenu, make DropDown more responsive and generalizable

zewebdev1337 · May 14, 2023 · 43dd181 · 43dd181
1 parent 9face79
commit 43dd181
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx
@@ -128,6 +128,7 @@ const ApiEndpointSelector = ({
       <DropDown
         selected={_apiEndpoint}
         selections={availableEndpoints.map((e) => ({ value: e, label: e }))}
+        dropDownStyles={['w-32', 'w-full']}
         onClick={(value) => {
           _setApiEndpoint(value);
         }}

diff --git a/src/components/DropDown/DropDown.tsx b/src/components/DropDown/DropDown.tsx
@@ -9,12 +9,14 @@ const DropDown = ({
   selected,
   selections,
   onClick,
+  dropDownStyles,
   icon = <DownChevronArrow />,
 }: {
   selected: string | ReactNode | React.ReactElement;
   selections: Selection[];
   onClick: (value: string) => void;
   icon?: React.ReactElement;
+  dropDownStyles?: string[];
 }) => {
   const {
     buttonRef,
@@ -29,14 +31,14 @@ const DropDown = ({
     <div className='prose dark:prose-invert relative'>
       <button
         ref={buttonRef}
-        className='btn btn-neutral btn-small flex gap-1'
+        className='btn btn-neutral btn-small flex gap-1 justify-between w-full'
         type='button'
         onClick={() => {
           setDropDown((prev) => !prev);
           setCheckPosition(true);
         }}
       >
-        {selected}
+        <span className="truncate">{selected}</span>
         {icon}
       </button>
       <div
@@ -46,15 +48,17 @@ const DropDown = ({
           dropDown ? '' : 'hidden'
         } absolute z-10 bg-white text-gray-800 group opacity-90 border-b border-black/10 ${
           openDirection === 'down' ? 'top-full' : 'bottom-full'
-        } rounded-lg shadow-xl dark:border-gray-900/50 dark:text-gray-100 dark:bg-gray-800`}
+        } rounded-lg shadow-xl dark:border-gray-900/50 dark:text-gray-100 dark:bg-gray-800 ${
+          dropDownStyles && dropDownStyles.join(' ')
+        }`}
       >
         <ul
           className='text-sm text-gray-700 dark:text-gray-200 p-0 m-0'
           aria-labelledby='dropdownDefaultButton'
         >
           {selections.map((r) => (
             <li
-              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer'
+              className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white truncate cursor-pointer'
               onClick={() => {
                 onClick(r.value);
                 setDropDown(false);