Creata card notifiche

salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor

@@ -0,0 +1,15 @@
+@using salesbook.Shared.Core.Dto.Notification
+
+<div class="row">
+    <div class="behind"><button class="trash-btn"><MudIcon Icon="@Icons.Material.Filled.Delete" /></button></div>
+    <div class="notification-card">
+        <div>
+            <div class="title">@Notification.Title</div>
+            <div class="subtitle">@Notification.Message</div>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public PushNotificationDTO Notification { get; set; } = new();
+}

salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor.css

@@ -0,0 +1,64 @@
+.row {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--mud-default-borderradius);
+    box-shadow: var(--custom-box-shadow);
+    width: 100%;
+}
+
+.behind {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 14px;
+    background: var(--mud-palette-error);
+    z-index: 0;
+}
+
+.trash-btn {
+    color: white;
+    padding: 10px 15px;
+    cursor: pointer;
+}
+
+.notification-card {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    background: var(--mud-palette-background);
+    transition: transform .2s ease;
+    touch-action: pan-y;
+    will-change: transform;
+    transform: translateX(0);
+}
+
+.avatar {
+    width: 42px;
+    height: 42px;
+    border-radius: 12px;
+    display: grid;
+    place-items: center;
+    background: #0b1220;
+    border: 1px solid #1f2937;
+    font-weight: bold;
+    color: #22d3ee;
+}
+
+.title {
+    font-weight: 700;
+    margin-bottom: unset !important;
+}
+
+.subtitle {
+    font-size: 13px;
+    color: #94a3b8;
+}
+
+.collapsing {
+    transition: height .22s ease, margin .22s ease, opacity .22s ease;
+    overflow: hidden;
+}