Last active
October 22, 2025 16:57
-
-
Save pazteddy/562b477cff3e1fb152d97b5b96086be9 to your computer and use it in GitHub Desktop.
Estilos para el componente NoteOverview
This file contains hidden or 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
| @page "/note-overview" | |
| @using TechNotes.Application.Notes | |
| @rendermode @(new InteractiveWebAssemblyRenderMode(false)) | |
| @inject HttpClient Http | |
| @inject NavigationManager NavigationManager | |
| <PageTitle>Mis notas</PageTitle> | |
| <h2 class="text-5xl font-bold text-center mb-3">Mis notas</h2> | |
| @if (notes == null) | |
| { | |
| <p><em>Cargando notas...</em></p> | |
| } | |
| else if (notes.Count == 0) | |
| { | |
| <p><em>No se encontraron notas.</em></p> | |
| } | |
| else | |
| { | |
| <div class="max-w-4xl mx-auto px-4"> | |
| <div class="border border-gray-200 rounded-lg shadow-sm"> | |
| <QuickGrid Items="notes.AsQueryable()" AutoGenerateColumns="false" Class="w-full table-fixed"> | |
| <PropertyColumn Property="@(a => a.Title)" title="Título" Sortable="true" Class="border-2 p-2" /> | |
| <TemplateColumn Title="Contenido" Class="border-2 p-2"> | |
| <div class="block max-w-xs truncate text-gray-700" title="@context.Content"> | |
| @context.Content | |
| </div> | |
| </TemplateColumn> | |
| <PropertyColumn Property="@(a => a.PublishedAt.ToShortDateString())" Title="Publicación" | |
| Sortable="true" Class="border-2 p-2" /> | |
| <TemplateColumn Title="Publicado" Class="border-2 p-2"> | |
| <div class="flex justify-center"> | |
| <span>@(context.IsPublished ? "✅" : "❌")</span> | |
| </div> | |
| </TemplateColumn> | |
| <TemplateColumn Title="Editar" Class="border-2 p-1"> | |
| <div class="flex justify-center"> | |
| <button @onclick="() => EditNote(context.Id)" aria-label="Editar nota" | |
| class="inline-flex items-center justify-center w-30 h-30 rounded-md text-blue-600 hover:bg-blue-50 hover:text-blue-800"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" | |
| class="w-5 h-5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </TemplateColumn> | |
| </QuickGrid> | |
| </div> | |
| </div> | |
| } | |
| @code { | |
| private List<NoteResponse>? notes; | |
| protected override async Task OnInitializedAsync() | |
| { | |
| var result = await Http.GetFromJsonAsync<List<NoteResponse>>("api/notes"); | |
| if (result != null) | |
| { | |
| notes = result; | |
| } | |
| else | |
| { | |
| notes = new List<NoteResponse>(); | |
| } | |
| } | |
| private void EditNote(int id) | |
| { | |
| NavigationManager.NavigateTo($"/note-editor/{id}"); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment