File transfer

resources/scripts/addons/advanced-admin/console/AutocompleteDropdown.tsx

@@ -0,0 +1,41 @@
+/**
+ * Autocomplete Dropdown
+ * Ball Studios <https://git.balls.studio>
+ */
+
+import React from 'react';
+
+interface Suggestion {
+    command: string;
+    description: string;
+    plugin: string;
+    dangerous: boolean;
+}
+
+interface Props {
+    suggestions: Suggestion[];
+    selectedIndex: number;
+    onSelect: (sug: Suggestion) => void;
+}
+
+export default function AutocompleteDropdown({ suggestions, selectedIndex, onSelect }: Props) {
+    return (
+        <ul className='addon-autocomplete-dropdown' role='listbox'>
+            {suggestions.map((sug, i) => (
+                <li
+                    key={sug.command}
+                    className={`addon-autocomplete-item ${i === selectedIndex ? 'active' : ''} ${sug.dangerous ? 'danger' : ''}`}
+                    role='option'
+                    aria-selected={i === selectedIndex}
+                    onClick={() => onSelect(sug)}
+                    onMouseDown={e => e.preventDefault()} // prevent blur
+                >
+                    <span className='addon-ac-command'>/{sug.command}</span>
+                    {sug.dangerous && <span className='addon-ac-danger-badge'>⚠ Danger</span>}
+                    <span className='addon-ac-desc'>{sug.description}</span>
+                    <span className='addon-ac-plugin'>{sug.plugin}</span>
+                </li>
+            ))}
+        </ul>
+    );
+}