Last active
March 23, 2024 18:19
-
-
Save codigoconjuan/42f5b85631bb749907ed12860d35c38e to your computer and use it in GitHub Desktop.
Buscador con Livewire
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="bg-gray-100 py-10"> | |
<h2 class="text-2xl md:text-4xl text-gray-600 text-center font-extrabold my-5">Buscar y Filtrar Vacantes</h2> | |
<div class="max-w-7xl mx-auto"> | |
<form> | |
<div class="md:grid md:grid-cols-3 gap-5"> | |
<div class="mb-5"> | |
<label | |
class="block mb-1 text-sm text-gray-700 uppercase font-bold " | |
for="termino">Término de Búsqueda | |
</label> | |
<input | |
id="termino" | |
type="text" | |
placeholder="Buscar por Término: ej. Laravel" | |
class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 w-full" | |
/> | |
</div> | |
<div class="mb-5"> | |
<label class="block mb-1 text-sm text-gray-700 uppercase font-bold">Categoría</label> | |
<select class="border-gray-300 p-2 w-full"> | |
<option>--Seleccione--</option> | |
@foreach ($categorias as $categoria ) | |
<option value="{{ $categoria->id }}">{{ $categoria->categoria }}</option> | |
@endforeach | |
</select> | |
</div> | |
<div class="mb-5"> | |
<label class="block mb-1 text-sm text-gray-700 uppercase font-bold">Salario Mensual</label> | |
<select class="border-gray-300 p-2 w-full"> | |
<option>-- Seleccione --</option> | |
@foreach ($salarios as $salario) | |
<option value="{{ $salario->id }}">{{$salario->salario}}</option> | |
@endforeach | |
</select> | |
</div> | |
</div> | |
<div class="flex justify-end"> | |
<input | |
type="submit" | |
class="bg-indigo-500 hover:bg-indigo-600 transition-colors text-white text-sm font-bold px-10 py-2 rounded cursor-pointer uppercase w-full md:w-auto" | |
value="Buscar" | |
/> | |
</div> | |
</form> | |
</div> | |
</div> |
Muchas gracias profe, encantado por el curso :) !
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
¡Gracias profe Juan! Excelente curso, desde ya esperando la parte/sección del curso que incluye Laravel con React o Vue