Skip to content

Instantly share code, notes, and snippets.

@pazteddy

pazteddy/UserRolesModal.razor

Last active October 17, 2025 15:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pazteddy/3d30006eb038163fb215d848121c2326 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pazteddy/3d30006eb038163fb215d848121c2326 to your computer and use it in GitHub Desktop.
Download ZIP
Modal para la gestión de roles
Raw
tailwindcss-command-line.md 
npx tailwindcss -i ./Styles/input.css -o ./wwwroot/tailwind.css --watch
Raw
UserRolesModal.razor
@if (ShowModal)
{
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<div class="relative w-full max-w-lg sm:max-w-xl bg-white rounded-xl shadow-xl p-4 sm:p-5">
<!-- Boton de cerrar esquina superior derecha -->
<button @onclick="CloseModal"
class="absolute top-3 right-3 inline-flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Cabecera -->
<div class="mb-3 pb-3 border-b border-gray-200">
<h2 class="flex items-center gap-2 text-lg font-semibold text-blue-900">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Gestionar roles
</h2>
<p class="mt-1 text-xs text-gray-600">Usuario: <span class="font-medium">@UserName</span></p>
</div>
<!-- Contenido que puede ser scrollable -->
<div class="space-y-4 max-h-[70vh] overflow-y-auto pr-1">
<!-- Listado de roles -->
<section>
<h3 class="text-sm font-semibold text-gray-700 mb-2">Roles asignados</h3>
@if (Roles.Any())
{
<div class="divide-y divide-gray-100 border border-gray-200 rounded-lg">
@foreach (var role in Roles)
{
<div class="flex items-center justify-between px-3 py-2">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
@role
</span>
<button @onclick="() => RemoveRole(role)"
class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium text-red-600 bg-red-50 hover:bg-red-100 !rounded-md">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
Eliminar
</button>
</div>
}
</div>
}
else
{
<div class="text-center py-6 bg-gray-50 rounded-lg border border-gray-200">
<p class="text-gray-600 text-sm">No hay roles asignados</p>
</div>
}
</section>
<!-- Agregar rol -->
<section class="pt-2 border-t border-gray-200">
<h3 class="text-sm font-semibold text-gray-700 mb-2">Agregar nuevo rol</h3>
<div class="flex gap-2">
<input @bind="newRole"
class="flex-1 h-9 px-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent !rounded-md"
placeholder="Nombre del rol" />
<button @onclick="AddRole"
class="inline-flex items-center gap-1.5 h-9 px-3 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 !rounded-md">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Agregar
</button>
</div>
</section>
</div>
<!-- Bóton para cerrar -->
<div class="mt-4 flex justify-end">
<button @onclick="CloseModal" class="px-5 py-2.5 text-sm font-medium text-white
bg-gradient-to-br from-red-500 to-red-600
hover:from-red-600 hover:to-red-700
focus:outline-none focus:ring-2 focus:ring-red-500
transition-colors !rounded-md">
Cerrar
</button>
</div>
</div>
</div>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment