94 lines
4.3 KiB
Plaintext
94 lines
4.3 KiB
Plaintext
@using Commerce.Contracts.DTOs
|
|
|
|
<div class="category-tree-node mb-2">
|
|
<!-- Category Card -->
|
|
<div
|
|
class="flex items-center gap-3 bg-base-100 hover:bg-base-200 border border-base-300 rounded-xl p-2 transition-all shadow-sm group flex-shrink-0 w-80">
|
|
<!-- Square Image -->
|
|
<div class="w-10 h-10 rounded-lg bg-base-300 flex-shrink-0 overflow-hidden shadow-inner">
|
|
@if (Category.Photos?.Any() == true)
|
|
{
|
|
<img src="@Category.Photos[0]" alt="@Category.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)" class="w-full h-full object-cover" />
|
|
}
|
|
else
|
|
{
|
|
<div class="flex items-center justify-center h-full opacity-20">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Name and Badge -->
|
|
<div class="flex-grow flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<span class="font-bold text-sm text-base-content tracking-tight">@Category.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)</span>
|
|
@if (Category.IsBundle)
|
|
{
|
|
<span class="text-[9px] uppercase font-black text-primary tracking-widest leading-none">Bundle</span>
|
|
}
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-1">
|
|
@if (IsAdmin)
|
|
{
|
|
<button type="button" @onclick="() => OnEdit.InvokeAsync(Category)"
|
|
class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
else
|
|
{
|
|
<a href="/shop?categoryId=@Category.Id"
|
|
class="btn btn-primary btn-xs rounded-lg group-hover:shadow-md transition-all">
|
|
Visit
|
|
</a>
|
|
}
|
|
|
|
@if (Category.ChildCategories?.Any() == true)
|
|
{
|
|
<button type="button" @onclick="ToggleExpand"
|
|
class="btn btn-ghost btn-xs btn-circle transition-transform duration-300 @(_expanded ? "rotate-90" : "")">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
else
|
|
{
|
|
<div class="w-6 h-6"></div> @* Spacer to align cards *@
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recursive Children -->
|
|
@if (_expanded && Category.ChildCategories?.Any() == true)
|
|
{
|
|
<div class="ml-10 mt-2 border-l-2 border-base-300 pl-4 animate-in slide-in-from-left-2 duration-200">
|
|
@foreach (var child in Category.ChildCategories)
|
|
{
|
|
<CategoryTreeItem Category="child" OnEdit="OnEdit" IsAdmin="IsAdmin" />
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public CategoryVM Category { get; set; } = new();
|
|
[Parameter] public EventCallback<CategoryVM> OnEdit { get; set; }
|
|
[Parameter] public bool IsAdmin { get; set; } = true;
|
|
|
|
private bool _expanded = false;
|
|
|
|
private void ToggleExpand() => _expanded = !_expanded;
|
|
} |