wire up spt version filter

this isn't working correctly from what I can tell, but it's a start.

app/Livewire/ModIndex.php

@@ -3,6 +3,7 @@
 namespace App\Livewire;
 
 use App\Models\Mod;
+use App\Models\SptVersion;
 use Illuminate\Support\Str;
 use Livewire\Component;
 use Livewire\WithPagination;
@@ -11,9 +12,11 @@ class ModIndex extends Component
 {
     use WithPagination;
 
-    public $modSearch = '';
+    public string $modSearch = '';
 
-    public $sectionFilter = 'featured';
+    public string $sectionFilter = 'featured';
+
+    public string $versionFilter = '';
 
     public function render()
     {
@@ -40,11 +43,16 @@ class ModIndex extends Component
             ->withTotalDownloads()
             ->with(['latestVersion', 'latestVersion.sptVersion', 'users:id,name'])
             ->whereHas('latestVersion')
-            ->where('name', 'like', '%'.Str::trim($this->modSearch).'%') //TODO: Is this how search do? Ref please advise. -waffle
+            ->whereHas('latestVersion.sptVersion', function ($query) {
+                $query->where('version', 'like', '%'.Str::trim($this->versionFilter).'%');
+            })
+            ->where('name', 'like', '%'.Str::trim($this->modSearch).'%')
             ->orderByDesc($section)
             ->paginate(12);
 
-        return view('livewire.mod-index', ['mods' => $mods]);
+        $sptVersions = SptVersion::select(['id', 'version', 'color_class'])->orderByDesc('version')->get();
+
+        return view('livewire.mod-index', ['mods' => $mods, 'sptVersions' => $sptVersions]);
     }
 
     public function changeSection($section): void

resources/views/livewire/mod-index.blade.php

@@ -68,11 +68,11 @@
             {{-- spt version filters --}}
             <div class="flex flex-col text-gray-700 bg-gray-300 dark:text-gray-200 dark:bg-gray-950 p-4 rounded-xl">
                 <h2>SPT Version</h2>
-                <select class="rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
-                    <option>All</option>
-                    <option>Some</option>
-                    <option>Other</option>
-                    <option>Blah</option>
+                <select wire:model.live="versionFilter" class="rounded-md dark:text-white bg-gray-100 dark:bg-gray-950 border-gray-300 dark:border-gray-700 focus:border-grey-500 dark:focus:border-grey-600 focus:ring-grey-500 dark:focus:ring-grey-600">
+                    <option disabled value="">Select a version</option>
+                    @foreach($sptVersions as $version)
+                        <option value="{{ $version->version }}">{{ $version->version }}</option>
+                    @endforeach
                 </select>
             </div>