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>

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>

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

@@ -1,8 +1,33 @@
-<flux:select {{ $attributes }} size="sm">
-    <flux:select.option value="petrol">Petrol (E10)</flux:select.option>
-    <flux:select.option value="e5">Super Unleaded (E5)</flux:select.option>
-    <flux:select.option value="diesel">Diesel</flux:select.option>
-    <flux:select.option value="b7_premium">Premium Diesel</flux:select.option>
-    <flux:select.option value="b10">B10 Biodiesel</flux:select.option>
-    <flux:select.option value="hvo">HVO</flux:select.option>
-</flux:select>
+<div
+    x-data="{
+        value: '',
+        labels: {
+            petrol: 'Petrol (E10)',
+            e5: 'Super Unleaded (E5)',
+            diesel: 'Diesel',
+            b7_premium: 'Premium Diesel',
+            b10: 'B10 Biodiesel',
+            hvo: 'HVO',
+        },
+        get label() {
+            return this.labels[this.value] ?? 'Select fuel type';
+        },
+    }"
+    x-modelable="value"
+    {{ $attributes->whereStartsWith('wire:model') }}
+>
+    <flux:dropdown>
+        <flux:button size="sm" icon:trailing="chevron-down">
+            <span x-text="label">Select fuel type</span>
+        </flux:button>
+
+        <flux:menu>
+            <flux:menu.item @click="value = 'petrol'">Petrol (E10)</flux:menu.item>
+            <flux:menu.item @click="value = 'e5'">Super Unleaded (E5)</flux:menu.item>
+            <flux:menu.item @click="value = 'diesel'">Diesel</flux:menu.item>
+            <flux:menu.item @click="value = 'b7_premium'">Premium Diesel</flux:menu.item>
+            <flux:menu.item @click="value = 'b10'">B10 Biodiesel</flux:menu.item>
+            <flux:menu.item @click="value = 'hvo'">HVO</flux:menu.item>
+        </flux:menu>
+    </flux:dropdown>
+</div>

resources/views/layouts/shell.blade.php

@@ -5,5 +5,6 @@
 </head>
 <body class="bg-surface-page text-text-base font-sans antialiased">
     {{ $slot }}
+    @fluxScripts
 </body>
 </html>