Styled not found page

This commit is contained in:
Khwezi Mngoma
2026-05-23 16:52:27 +02:00
parent 5e839dca03
commit 0cb77f87af
10 changed files with 655 additions and 40 deletions
+20 -6
View File
@@ -1,5 +1,6 @@
@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation
<div class="container text-center text-hero-wrapper">
<h1 class="display-3 text-dark mb-3 px-2 master-headline">
@@ -136,7 +137,9 @@
@foreach (var book in PaginatedBooks)
{
<div class="col-12 col-md-6 col-lg-4">
<div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card">
<div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
style="cursor: pointer;"
@onclick="() => NavigateToProduct(book.Id)">
<div class="d-flex justify-content-between align-items-center">
@if (book.IsNew)
{
@@ -156,7 +159,7 @@
</div>
</div>
</div>
<div class="d-flex justify-content-between align-items-start mt-3 px-2">
<div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
<div>
<h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
<p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
@@ -172,7 +175,9 @@
<div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
@foreach (var book in PaginatedBooks)
{
<div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item">
<div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
style="cursor: pointer;"
@onclick="() => NavigateToProduct(book.Id)">
<div class="d-flex align-items-center gap-4 structural-list-left">
<span class="text-dark fw-medium list-item-title">@book.Title</span>
<span class="text-muted small list-item-author">by @book.Author</span>
@@ -226,6 +231,7 @@
public class BookItem
{
public long Id { get; set; } // Refactored to hold unique record indices of type long
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public decimal Price { get; set; }
@@ -288,9 +294,10 @@
var extraSourceCategories = new[] { "Fine Arts", "Science", "Photography", "Typography", "Interior Design", "Industrialism", "Fashion", "Curation Studies" };
DynamicExtendedCategories.AddRange(extraSourceCategories);
BooksCollection.Add(new BookItem { Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
BooksCollection.Add(new BookItem { Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
BooksCollection.Add(new BookItem { Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
// Updated mock items to supply long IDs matching your screenshot items
BooksCollection.Add(new BookItem { Id = 1L, Title = "Letters from M/M (Paris)", Author = "M/M Paris", Price = 720, Category = "Graphic Design", IsNew = true, Isbn = "9782915173" });
BooksCollection.Add(new BookItem { Id = 2L, Title = "Daan Paans: Floating Signifiers", Author = "Daan Paans", Price = 540, Category = "Product Design", IsNew = true, Isbn = "9789492051" });
BooksCollection.Add(new BookItem { Id = 3L, Title = "Album Architectures, Maputo", Author = "Guedes Archive", Price = 350, Category = "Architecture", IsNew = true, Isbn = "9780620751" });
var designPrefixes = new[] { "Minimalist", "Monolithic", "Architectural", "Japanese", "Scandinavian" };
var designNouns = new[] { "Structures", "Typologies", "Forms & Spaces", "Systems Matrix", "Graphic Ephemera" };
@@ -303,6 +310,7 @@
{
BooksCollection.Add(new BookItem
{
Id = (long)i,
Title = $"{designPrefixes[random.Next(designPrefixes.Length)]} {designNouns[random.Next(designNouns.Length)]} (Vol. {random.Next(1, 4)})",
Author = designers[random.Next(designers.Length)],
Price = random.Next(25, 135) * 10,
@@ -313,6 +321,12 @@
}
}
// Handles the explicit page transition routing
private void NavigateToProduct(long id)
{
Navigation.NavigateTo($"/product/{id}");
}
private void SetViewMode(ViewMode targetMode) => CurrentViewMode = targetMode;
private void SelectCategory(string categoryName) { ActiveCategory = categoryName; VisibleCount = ItemsPerPage; }
private void ToggleExtraCategories() => ShowExpandedCategories = !ShowExpandedCategories;