1st commit

wwws/admin/src/components/dropdown.js

@@ -0,0 +1,87 @@
+const dropdownData = [
+    { label: 'Options', placeholder: 'Select an option', description: 'Choose one of the following items', items: ['Item 1', 'Item 2', 'Item 3'] },
+    { placeholder: 'Select without label', items: ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G', 'Item H', 'Item I', 'Item J', 'Item K'] },
+    { label: 'Options 2', placeholder: 'Choose an item', description: 'Additional description lorem ipsum', items: ['Option 1', 'Option 2', 'Option 3'] },
+];
+
+function createDropdownComponent({ label, placeholder, description, items }) {
+    const dropdownContainer = document.createElement('div');
+    dropdownContainer.className = 'dropdown-container mb-6';
+
+    if (label) {
+        const labelElement = document.createElement('label');
+        labelElement.className = 'dropdown-label block text-gray-700 text-sm font-bold mb-2';
+        labelElement.innerText = label;
+        dropdownContainer.appendChild(labelElement);
+    }
+
+    const buttonElement = document.createElement('div');
+    buttonElement.className = 'dropdown-button';
+    buttonElement.innerText = placeholder || 'Select an option';
+    dropdownContainer.appendChild(buttonElement);
+
+    const dropdownList = document.createElement('div');
+    dropdownList.className = 'dropdown-list';
+    dropdownList.style.display = 'none';
+
+    if (description) {
+        dropdownList.classList.add('dropdown-list-with-description');
+    } else {
+        dropdownList.classList.add('dropdown-list-no-description');
+    }
+
+    items.forEach(item => {
+        const itemElement = document.createElement('div');
+        itemElement.className = 'dropdown-item';
+        
+        const itemText = document.createElement('span');
+        itemText.className = 'dropdown-item-text';
+        itemText.innerText = item;
+
+        itemElement.appendChild(itemText);
+        itemElement.addEventListener('click', () => {
+            buttonElement.innerHTML = '';
+            buttonElement.className = 'dropdown-button selected-dropdown-item';
+            
+            const selectedItemText = document.createElement('span');
+            selectedItemText.className = 'selected-dropdown-item-text';
+            selectedItemText.innerText = item;
+            buttonElement.appendChild(selectedItemText);
+
+            dropdownList.style.display = 'none';
+        });
+
+        dropdownList.appendChild(itemElement);
+    });
+
+    buttonElement.addEventListener('click', (event) => {
+        event.stopPropagation();
+        dropdownList.style.display = dropdownList.style.display === 'none' ? 'flex' : 'none';
+    });
+
+    document.addEventListener('click', (event) => {
+        if (!dropdownContainer.contains(event.target)) {
+            dropdownList.style.display = 'none';
+        }
+    });
+
+    dropdownContainer.appendChild(dropdownList);
+
+    if (description) {
+        const descriptionElement = document.createElement('p');
+        descriptionElement.className = 'dropdown-description text-gray-600 text-xs italic mt-2';
+        descriptionElement.innerText = description;
+        dropdownContainer.appendChild(descriptionElement);
+    }
+
+    return dropdownContainer;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    console.log("Document loaded, rendering dropdowns...");
+    const dropdownContainer = document.getElementById('dropdown-container');
+    dropdownData.forEach(dropdownConfig => {
+        const dropdownComponent = createDropdownComponent(dropdownConfig);
+        dropdownContainer.appendChild(dropdownComponent);
+    });
+});