We now have a drop down component

Author: AdamKyle

resources/js/game/components/side-peeks/character-inventory/usable-items/usable-items.tsx

@@ -10,10 +10,10 @@ import BaseInventoryItemDefinition from '../api-definitions/base-inventory-item-
 
 import { GameDataError } from 'game-data/components/game-data-error';
 
+import Dropdown from 'ui/drop-down/drop-down';
+import { DropdownItem } from 'ui/drop-down/types/drop-down-item';
 import Input from 'ui/input/input';
 import InfiniteLoader from 'ui/loading-bar/infinite-loader';
-import Dropdown from "ui/drop-down/drop-down";
-import {DropdownItem} from "ui/drop-down/types/drop-down-item";
 
 const UsableItems = ({ character_id }: UsableItemsProps) => {
   const { data, error, loading, setSearchText, setFilters, onEndReached } =
@@ -42,7 +42,7 @@ const UsableItems = ({ character_id }: UsableItemsProps) => {
 
   const handleClearFilters = () => {
     setFilters({});
-  }
+  };
 
   if (error) {
     return <GameDataError />;
@@ -59,13 +59,17 @@ const UsableItems = ({ character_id }: UsableItemsProps) => {
         <Input on_change={onSearch} clearable />
       </div>
       <div className="pb-4 px-4 mt-4">
-        <Dropdown items={[
-          {'Increase Stats': 'increase-stats'},
-          {'Effects Skills': 'effects-skills'},
-          {'Effects Base Modifiers': 'effects-base-modifiers'},
-          {'Damages Kingdoms': 'damages-kingdoms'},
-          {'Holy Oils': 'holy-oils'}
-        ]} on_select={handleFilterChange} on_clear={handleClearFilters} />
+        <Dropdown
+          items={[
+            { 'Increase Stats': 'increase-stats' },
+            { 'Effects Skills': 'effects-skills' },
+            { 'Effects Base Modifiers': 'effects-base-modifiers' },
+            { 'Damages Kingdoms': 'damages-kingdoms' },
+            { 'Holy Oils': 'holy-oils' },
+          ]}
+          on_select={handleFilterChange}
+          on_clear={handleClearFilters}
+        />
       </div>
       <div className="flex-1 min-h-0">
         <UsableItemsList

resources/js/ui/drop-down/drop-down.tsx

@@ -1,8 +1,14 @@
+import { isEmpty } from 'lodash';
 import React, { ReactNode, useRef, useState, useEffect } from 'react';
+
 import DropdownProps from 'ui/drop-down/types/drop-down-props';
-import { isEmpty } from 'lodash';
 
-const Dropdown = ({ items, on_select, all_click_outside, on_clear }: DropdownProps) => {
+const Dropdown = ({
+  items,
+  on_select,
+  all_click_outside,
+  on_clear,
+}: DropdownProps) => {
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState('');
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
@@ -21,10 +27,14 @@ const Dropdown = ({ items, on_select, all_click_outside, on_clear }: DropdownPro
     if (!open) return;
     if (e.key === 'ArrowDown') {
       e.preventDefault();
-      setFocusedIndex((prev) => (prev === null || prev === items.length - 1 ? 0 : prev + 1));
+      setFocusedIndex((prev) =>
+        prev === null || prev === items.length - 1 ? 0 : prev + 1
+      );
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
-      setFocusedIndex((prev) => (prev === null || prev === 0 ? items.length - 1 : prev - 1));
+      setFocusedIndex((prev) =>
+        prev === null || prev === 0 ? items.length - 1 : prev - 1
+      );
     } else if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       if (focusedIndex !== null) {
@@ -51,7 +61,9 @@ const Dropdown = ({ items, on_select, all_click_outside, on_clear }: DropdownPro
 
   const renderDropdownIcon = (): ReactNode => {
     if (isEmpty(selected)) {
-      return <i className="fas fa-chevron-down text-gray-500 dark:text-gray-300"></i>;
+      return (
+        <i className="fas fa-chevron-down text-gray-500 dark:text-gray-300"></i>
+      );
     }
 
     return (
@@ -85,7 +97,7 @@ const Dropdown = ({ items, on_select, all_click_outside, on_clear }: DropdownPro
             setFocusedIndex(null);
           }}
           className={`px-4 py-2 cursor-pointer ${
-            focusedIndex === idx ? 'bg-gray-200 dark:bg-gray-700' : ''
+            focusedIndex === idx ? 'bg-gray-200 dark:bg-gray-700 rounded-md' : ''
           } hover:bg-gray-200 dark:hover:bg-gray-700`}
         >
           {label}
@@ -102,7 +114,9 @@ const Dropdown = ({ items, on_select, all_click_outside, on_clear }: DropdownPro
         id="dropdown-listbox"
         role="listbox"
         ref={listRef}
-        aria-activedescendant={focusedIndex !== null ? `dropdown-item-${focusedIndex}` : undefined}
+        aria-activedescendant={
+          focusedIndex !== null ? `dropdown-item-${focusedIndex}` : undefined
+        }
         className="absolute z-50 w-full mt-1 max-h-60 overflow-auto border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-black dark:text-white"
       >
         {renderItemsForDropdown()}
@@ -127,7 +141,9 @@ const Dropdown = ({ items, on_select, all_click_outside, on_clear }: DropdownPro
         onClick={() => setOpen((prev) => !prev)}
         className="w-full p-2 pr-10 pl-3 rounded-md border border-gray-500 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center relative"
       >
-        <span className="flex-1 truncate">{selected || 'Select an option'}</span>
+        <span className="flex-1 truncate">
+          {selected || 'Select an option'}
+        </span>
         <span className="absolute right-3 top-1/2 -translate-y-1/2">
           {renderDropdownIcon()}
         </span>

resources/js/ui/drop-down/types/drop-down-item.ts

@@ -1 +1 @@
-export type DropdownItem = Record<string, string | number>;
+export type DropdownItem = Record<string, string | number>;

resources/js/ui/drop-down/types/drop-down-props.ts

@@ -1,8 +1,8 @@
-import {DropdownItem} from "ui/drop-down/types/drop-down-item";
+import { DropdownItem } from 'ui/drop-down/types/drop-down-item';
 
 export default interface DropdownProps {
   items: DropdownItem[];
   on_select: (item: DropdownItem) => void;
   on_clear: () => void;
   all_click_outside?: boolean;
-};
+}

resources/js/ui/input/input.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+
 import InputProps from 'ui/input/types/input-props';
 
 const Input = ({ on_change, clearable }: InputProps) => {
@@ -28,8 +29,8 @@ const Input = ({ on_change, clearable }: InputProps) => {
       >
         <i className="fas fa-times"></i>
       </button>
-    )
-  }
+    );
+  };
 
   return (
     <div className="relative w-full">