Add select component, and start of switch to use @pa instead of @js/@css

resources/views/user/system/register.blade.php

@@ -21,27 +21,13 @@ use App\Models\System;
 						<div class="row">
 							<!-- Name -->
 							<div class="col-4">
-								<label for="system" class="form-label">BBS Name</label>
-								<div class="input-group has-validation">
-									<span class="input-group-text"><i class="bi bi-laptop-fill"></i></span>
-									<select style="width: 80%;" class="form-select @error('system_id') is-invalid @enderror" id="system" name="id" required>
-										<option value="">&nbsp;</option>
-										@foreach (System::select(['systems.id','systems.name'])
-											->active()
-											->where('id','<>',$setup->system_id)
-											->whereRaw('id NOT IN (SELECT system_id FROM "system_user")')
-											->cursor() as $oo)
-											<option value="{{ $oo->id }}" @if(old('id')===$oo->id)selected @endif>{{ $oo->name }}</option>
-										@endforeach
-									</select>
-									<span class="invalid-feedback" role="alert">
-										@error('system_id')
-											{{ $message }}
-										@else
-											BBS Name is required.
-										@enderror
-									</span>
-								</div>
+								@php($options = System::select(['systems.id','systems.name'])
+									->active()
+									->where('id','<>',$setup->system_id)
+									->whereRaw('id NOT IN (SELECT system_id FROM "system_user")')
+									->cursor())
+
+								<x-form.select id="system" name="id" icon="bi-laptop-fill" label="BBS Name" class="form-label" placeholder="See if your BBS exists, otherwise add it" feedback="BBS Name is required" helper="Enter your BBS name and press NEXT" :addvalues="true" :options="$options->map(fn($item,$key)=>['id'=>$item->id,'value'=>$item->name])" />
 							</div>
 						</div>
 
@@ -74,21 +60,7 @@ use App\Models\System;
 	</div>
 @endsection
 
-@section('page-css')
-	@css('select2')
-@append
 @section('page-scripts')
-	@js('select2')
-
-	<script type='text/javascript'>
-		$(document).ready(function() {
-			$('#system').select2({
-				placeholder: 'See if your BBS exists',
-				tags: true,
-			});
-		});
-	</script>
-
 	<script type='text/javascript'>
 		var system_id;
 		var noauth = new bootstrap.Modal(document.getElementById('no-auth'), {});