account pages: login, order history, order details, account details, wishlist

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

@@ -1,17 +1,22 @@
 @props([
-    'options'   => [],
-    'value'     => null,
-    'name'      => null,
-    'ariaLabel' => null,
+    'options'     => [],
+    'value'       => null,
+    'name'        => null,
+    'ariaLabel'   => null,
+    'placeholder' => null,
+    'block'       => false,
 ])
 
 
-<div class="relative inline-flex items-center">
+<div @class(['relative items-center', 'flex w-full' => $block, 'inline-flex' => ! $block])>
     <select
         @if($name) name="{{ $name }}" @endif
         @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
-        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border-b border-black  pr-10 py-2.5 cursor-pointer focus:outline-none']) }}
+        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border-b border-black  pr-10 py-2.5 cursor-pointer focus:outline-none'.($block ? ' w-full' : '')]) }}
     >
+        @if($placeholder !== null)
+            <option value="" @selected($value === null || $value === '')>{{ $placeholder }}</option>
+        @endif
         @foreach($options as $option)
             <option value="{{ $option['value'] }}" @selected($value === $option['value'])>{{ $option['label'] }}</option>
         @endforeach