Khwezi Mngoma
69 lines
4.0 KiB
Plaintext
69 lines
4.0 KiB
Plaintext
<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
|
|
<div class="d-flex flex-column h-100 justify-content-between">
|
|
|
|
<div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
|
|
style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
|
|
@onclick="OnCardClick">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
@if (IsNew)
|
|
{
|
|
<span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
|
|
}
|
|
else
|
|
{
|
|
<div></div>
|
|
}
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0 btn-cart-icon"
|
|
style="width: 32px; height: 32px; transition: all 0.2s ease;"
|
|
title="Add to Cart"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="top"
|
|
@onclick="HandleAddToCart" @onclick:stopPropagation>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0"
|
|
style="width: 32px; height: 32px;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
|
|
<line x1="7" y1="17" x2="17" y2="7" />
|
|
<polyline points="7,7 17,7 17,17" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
|
|
@if (!string.IsNullOrWhiteSpace(BookImageUrl))
|
|
{
|
|
<img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
|
|
}
|
|
else
|
|
{
|
|
<div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
|
|
style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
|
|
<div style="max-width: 100%; overflow: hidden; word-break: break-word;">
|
|
@Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
|
|
<div style="max-width: 72%;">
|
|
<span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
|
|
<span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
|
|
</div>
|
|
<span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div> |