gp
This commit is contained in:
+35
-26
@@ -1,32 +1,41 @@
|
||||
<!-- Container Principal -->
|
||||
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
|
||||
<div class="container mx-auto p-6 w-full ">
|
||||
<h1 class="text-2xl font-bold mb-4">Lista de Usuarios</h1>
|
||||
<div class="justify-between w-full md:flex">
|
||||
<p class="mb-4 text-sm">Gestión de usuarios.</p>
|
||||
<!-- Campo de Búsqueda -->
|
||||
<div class="mb-4 relative">
|
||||
<input type="text" x-model="searchQuery" placeholder="Buscar..."
|
||||
class="border border-gray-300 rounded w-full md:w-60 p-2 text-sm" @input="loadRegister()">
|
||||
|
||||
<!-- Contenedor para el botón o el ícono de carga -->
|
||||
<div x-show="isLoading" class="absolute right-2 top-2 flex items-center">
|
||||
<!-- SVG de cargando (puedes reemplazarlo con un botón si lo prefieres) -->
|
||||
<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
|
||||
</circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
|
||||
</svg>
|
||||
<div x-data="modals" @keydown.escape="closeModal" class="bg-white rounded-lg shadow">
|
||||
<div class="container mx-auto p-6 w-full">
|
||||
<!-- Page header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">Usuarios</h1>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Gestión de usuarios del sistema</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Búsqueda -->
|
||||
<div class="relative">
|
||||
<div class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" x-model="searchQuery" placeholder="Buscar..."
|
||||
class="border border-gray-300 rounded w-full md:w-56" @input="loadRegister()">
|
||||
<div x-show="isLoading" class="absolute right-2.5 top-1/2 -translate-y-1/2">
|
||||
<svg class="animate-spin h-3.5 w-3.5 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nuevo -->
|
||||
<button class="flex items-center gap-2 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
|
||||
style="background-color:#8eb02f"
|
||||
onmouseover="this.style.backgroundColor='#6d8c24'"
|
||||
onmouseout="this.style.backgroundColor='#8eb02f'"
|
||||
x-on:click="addModal=true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
Nuevo usuario
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Botón Nuevo Módulo -->
|
||||
<div class="flex justify-end mb-4">
|
||||
<button class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm"
|
||||
x-on:click="addModal=true">Nuevo</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Agregar el GIF de carga -->
|
||||
|
||||
Reference in New Issue
Block a user