version switcher styling

Author: gwleuverink

resources/views/components/icons/git-branch.blade.php

@@ -0,0 +1,41 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+>
+    <circle
+        cx="4"
+        cy="7"
+        r="2"
+        stroke="#000"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+    />
+    <circle
+        cx="20"
+        cy="7"
+        r="2"
+        stroke="#000"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+    />
+    <circle
+        cx="20"
+        cy="17"
+        r="2"
+        stroke="#000"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+    />
+    <path
+        stroke="#000"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M18 7H6M7 7v0a3 3 0 0 1 3 3v5a2 2 0 0 0 2 2h6"
+    />
+</svg>

resources/views/livewire/version-switcher.blade.php

@@ -1,11 +1,20 @@
-<form wire:submit="switch">
+<form wire:submit.prevent>
 
-    <select wire:model.live="version" name="version">
+    <div class="inline-flex items-center opacity-60 hover:opacity-100 transition-opacity duration-200 focus-within:outline-2 focus-within:rounded-xs focus-within:outline-offset-2">
 
-        @foreach($versions as $number => $label)
-            <option value="{{ $number }}">{{ $label }}</option>
-        @endforeach
+        <x-icons.git-branch class="size-4" />
 
-    </select>
+        <select
+            name="version"
+            wire:model.live="version"
+            class="text-sm -ml-1 py-0 pr-8 bg-transparent border-0 whitespace-nowrap focus:ring-0"
+        >
+
+            @foreach($versions as $number => $label)
+                <option value="{{ $number }}">Version {{ $label }}</option>
+            @endforeach
+
+        </select>
+    </div>
 
 </form>