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

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

@@ -1,7 +1,31 @@
-<flux:select {{ $attributes }} size="sm">
-    <flux:select.option value="1">1 mile</flux:select.option>
-    <flux:select.option value="2">2 miles</flux:select.option>
-    <flux:select.option value="5">5 miles</flux:select.option>
-    <flux:select.option value="10">10 miles</flux:select.option>
-    <flux:select.option value="20">20 miles</flux:select.option>
-</flux:select>
+<div
+    x-data="{
+        value: '',
+        labels: {
+            1: '1 mile',
+            2: '2 miles',
+            5: '5 miles',
+            10: '10 miles',
+            20: '20 miles',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Radius';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Radius</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 1">1 mile</flux:menu.item>
+            <flux:menu.item @click="value = 2">2 miles</flux:menu.item>
+            <flux:menu.item @click="value = 5">5 miles</flux:menu.item>
+            <flux:menu.item @click="value = 10">10 miles</flux:menu.item>
+            <flux:menu.item @click="value = 20">20 miles</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>