Create prime pagine

Template.Shared/Components/SingleElements/Card/ActivityCard.razor

@@ -0,0 +1,20 @@
+<div class="activity-card @Type">
+    <div class="activity-hours-section">
+        <span class="activity-hours">14:00</span>
+        <MudChip T="string" Icon="@IconConstants.Chip.Time" Color="Color.Dark" Size="Size.Small">1h</MudChip>
+    </div>
+            
+    <div class="activity-body-section">
+        <span class="activity-title">Format</span>
+        <span class="activity-subtitle">Preparazione preventivo</span>
+    </div>
+            
+    <div class="activity-info-section">
+        <MudChip T="string" Icon="@IconConstants.Chip.Stato" Size="Size.Small" Color="Color.Success">Completata</MudChip>
+        <MudChip T="string" Icon="@IconConstants.Chip.User" Size="Size.Small">GMANCINI</MudChip>
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Type { get; set; } = "";
+}

Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css

@@ -0,0 +1,47 @@
+.activity-card {
+    background: var(--mud-palette-background-gray);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: .5rem .7rem;
+    border-radius: 12px;
+    line-height: normal;
+}
+
+.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
+
+.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
+
+.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
+
+.activity-hours-section {
+    width: min-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.activity-hours { font-weight: 700; }
+
+.activity-hours-section ::deep .mud-chip { margin: 5px 0 0 !important; }
+
+.activity-body-section {
+    width: fit-content;
+    margin: 0 .5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-title {
+    font-weight: 800;
+    font-size: medium;
+}
+
+.activity-subtitle {
+    font-size: smaller;
+    color: var(--mud-palette-gray-darker)
+}
+
+.activity-info-section { width: min-content; }