feat: replace flux:select with dropdown menus using Alpine.js for fuel filters

resources/views/components/fuel/sort-select.blade.php

@@ -1,7 +1,31 @@
-<flux:select {{ $attributes }} size="sm">
-    <flux:select.option value="reliable">Best price (reliable)</flux:select.option>
-    <flux:select.option value="price">Cheapest first</flux:select.option>
-    <flux:select.option value="distance">Nearest first</flux:select.option>
-    <flux:select.option value="updated">Recently updated</flux:select.option>
-    <flux:select.option value="brand">Brand A–Z</flux:select.option>
-</flux:select>
+<div
+    x-data="{
+        value: '',
+        labels: {
+            reliable: 'Best price (reliable)',
+            price: 'Cheapest first',
+            distance: 'Nearest first',
+            updated: 'Recently updated',
+            brand: 'Brand A–Z',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Sort by';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Sort by</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 'reliable'">Best price (reliable)</flux:menu.item>
+            <flux:menu.item @click="value = 'price'">Cheapest first</flux:menu.item>
+            <flux:menu.item @click="value = 'distance'">Nearest first</flux:menu.item>
+            <flux:menu.item @click="value = 'updated'">Recently updated</flux:menu.item>
+            <flux:menu.item @click="value = 'brand'">Brand A–Z</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>