| | | 1 | | @using Chronicis.Client.Components.Shared |
| | | 2 | | @inject NavigationManager Navigation |
| | | 3 | | |
| | 15 | 4 | | @if (Prompts.Any()) |
| | | 5 | | { |
| | | 6 | | <MudPaper Elevation="1" Class="prompt-panel"> |
| | | 7 | | <MudText Typo="Typo.h6" Class="panel-title"> |
| | | 8 | | <MudIcon Icon="@Icons.Material.Filled.AutoAwesome" Class="mr-2" /> |
| | | 9 | | Suggestions |
| | | 10 | | </MudText> |
| | | 11 | | |
| | | 12 | | <div class="prompts-list"> |
| | 60 | 13 | | @foreach (var prompt in Prompts) |
| | | 14 | | { |
| | | 15 | | <div class="prompt-item @GetCategoryClass(prompt.Category)"> |
| | | 16 | | <div class="prompt-icon"> |
| | | 17 | | <IconDisplay Icon="@prompt.Icon" DefaultIcon="💡" /> |
| | | 18 | | </div> |
| | | 19 | | <div class="prompt-content"> |
| | 16 | 20 | | <MudText Typo="Typo.subtitle2" Class="prompt-title">@prompt.Title</MudText> |
| | 16 | 21 | | <MudText Typo="Typo.body2" Class="prompt-message">@prompt.Message</MudText> |
| | 16 | 22 | | @if (!string.IsNullOrEmpty(prompt.ActionText) && !string.IsNullOrEmpty(prompt.ActionUrl)) |
| | | 23 | | { |
| | | 24 | | <MudButton Variant="Variant.Text" |
| | | 25 | | Color="Color.Primary" |
| | | 26 | | Size="Size.Small" |
| | 1 | 27 | | OnClick="@(() => NavigateTo(prompt.ActionUrl))" |
| | | 28 | | Class="prompt-action"> |
| | 3 | 29 | | @prompt.ActionText → |
| | | 30 | | </MudButton> |
| | | 31 | | } |
| | | 32 | | </div> |
| | | 33 | | </div> |
| | | 34 | | } |
| | | 35 | | </div> |
| | | 36 | | </MudPaper> |
| | | 37 | | } |
| | | 38 | | |
| | | 39 | | <style> |
| | | 40 | | .prompt-panel { |
| | | 41 | | padding: var(--chronicis-space-lg); |
| | | 42 | | border-radius: var(--chronicis-radius-lg); |
| | | 43 | | background: linear-gradient(135deg, rgba(196, 175, 142, 0.08) 0%, rgba(196, 175, 142, 0.02) 100%); |
| | | 44 | | } |
| | | 45 | | |
| | | 46 | | .panel-title { |
| | | 47 | | display: flex; |
| | | 48 | | align-items: center; |
| | | 49 | | margin-bottom: var(--chronicis-space-md); |
| | | 50 | | color: var(--chronicis-charcoal); |
| | | 51 | | } |
| | | 52 | | |
| | | 53 | | .prompts-list { |
| | | 54 | | display: flex; |
| | | 55 | | flex-direction: column; |
| | | 56 | | gap: var(--chronicis-space-md); |
| | | 57 | | } |
| | | 58 | | |
| | | 59 | | .prompt-item { |
| | | 60 | | display: flex; |
| | | 61 | | gap: var(--chronicis-space-md); |
| | | 62 | | padding: var(--chronicis-space-md); |
| | | 63 | | border-radius: var(--chronicis-radius-md); |
| | | 64 | | background: rgba(255, 255, 255, 0.6); |
| | | 65 | | border-left: 3px solid var(--chronicis-beige-gold); |
| | | 66 | | transition: all var(--chronicis-transition-fast); |
| | | 67 | | } |
| | | 68 | | |
| | | 69 | | .prompt-item:hover { |
| | | 70 | | background: rgba(255, 255, 255, 0.9); |
| | | 71 | | } |
| | | 72 | | |
| | | 73 | | .prompt-item.missing-fundamental { |
| | | 74 | | border-left-color: #e57373; |
| | | 75 | | background: rgba(229, 115, 115, 0.05); |
| | | 76 | | } |
| | | 77 | | |
| | | 78 | | .prompt-item.missing-fundamental:hover { |
| | | 79 | | background: rgba(229, 115, 115, 0.1); |
| | | 80 | | } |
| | | 81 | | |
| | | 82 | | .prompt-item.needs-attention { |
| | | 83 | | border-left-color: #ffb74d; |
| | | 84 | | background: rgba(255, 183, 77, 0.05); |
| | | 85 | | } |
| | | 86 | | |
| | | 87 | | .prompt-item.needs-attention:hover { |
| | | 88 | | background: rgba(255, 183, 77, 0.1); |
| | | 89 | | } |
| | | 90 | | |
| | | 91 | | .prompt-item.suggestion { |
| | | 92 | | border-left-color: #64b5f6; |
| | | 93 | | background: rgba(100, 181, 246, 0.05); |
| | | 94 | | } |
| | | 95 | | |
| | | 96 | | .prompt-item.suggestion:hover { |
| | | 97 | | background: rgba(100, 181, 246, 0.1); |
| | | 98 | | } |
| | | 99 | | |
| | | 100 | | .prompt-icon { |
| | | 101 | | font-size: 1.5rem; |
| | | 102 | | flex-shrink: 0; |
| | | 103 | | width: 32px; |
| | | 104 | | text-align: center; |
| | | 105 | | } |
| | | 106 | | |
| | | 107 | | .prompt-content { |
| | | 108 | | flex: 1; |
| | | 109 | | min-width: 0; |
| | | 110 | | } |
| | | 111 | | |
| | | 112 | | .prompt-title { |
| | | 113 | | color: var(--chronicis-charcoal); |
| | | 114 | | font-weight: 600; |
| | | 115 | | margin-bottom: 2px; |
| | | 116 | | } |
| | | 117 | | |
| | | 118 | | .prompt-message { |
| | | 119 | | color: var(--chronicis-slate-grey); |
| | | 120 | | font-size: 0.85rem; |
| | | 121 | | line-height: 1.4; |
| | | 122 | | } |
| | | 123 | | |
| | | 124 | | .prompt-action { |
| | | 125 | | margin-top: var(--chronicis-space-xs); |
| | | 126 | | padding: 0; |
| | | 127 | | min-width: auto; |
| | | 128 | | font-size: 0.8rem; |
| | | 129 | | } |
| | | 130 | | </style> |
| | | 131 | | |
| | | 132 | | @code { |
| | | 133 | | [Parameter] |
| | 57 | 134 | | public List<PromptDto> Prompts { get; set; } = new(); |
| | | 135 | | |
| | | 136 | | private void NavigateTo(string url) |
| | | 137 | | { |
| | 1 | 138 | | Navigation.NavigateTo(url); |
| | 1 | 139 | | } |
| | | 140 | | |
| | | 141 | | private string GetCategoryClass(PromptCategory category) |
| | | 142 | | { |
| | 16 | 143 | | return category switch |
| | 16 | 144 | | { |
| | 1 | 145 | | PromptCategory.MissingFundamental => "missing-fundamental", |
| | 1 | 146 | | PromptCategory.NeedsAttention => "needs-attention", |
| | 14 | 147 | | PromptCategory.Suggestion => "suggestion", |
| | 0 | 148 | | _ => "" |
| | 16 | 149 | | }; |
| | | 150 | | } |
| | | 151 | | } |