contact page, legal pages and category page

resources/views/components/ui/select.blade.php

@@ -0,0 +1,30 @@
+@props([
+    'options'   => [],
+    'value'     => null,
+    'name'      => null,
+    'ariaLabel' => null,
+])
+
+{{--
+    Native <select>, styled to match the site's bordered/uppercase look.
+    Usage:
+    <x-ui.select
+        :options="[['value' => 'a', 'label' => 'Option A'], ...]"
+        value="a"
+        ariaLabel="Sort products"
+    />
+--}}
+
+<div class="relative inline-flex items-center">
+    <select
+        @if($name) name="{{ $name }}" @endif
+        @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
+        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border border-black pl-4 pr-10 py-2.5 font-display font-bold cursor-pointer focus:outline-none']) }}
+    >
+        @foreach($options as $option)
+            <option value="{{ $option['value'] }}" @selected($value === $option['value'])>{{ $option['label'] }}</option>
+        @endforeach
+    </select>
+
+    <x-ui.icon name="arrow-down" :size="16" class="pointer-events-none absolute right-4" />
+</div>