Card Notification

<div class="card card-notification" [ngClass]="getClasses()">
  <h5 class="card-title">{{ data.title }}</h5>
  <p class="card-text">{{ data.text }}</p>
  <div class="card-footer">
    <span>
      @if (data.redirect_url) {
        <a class="card-readmore" [href]="data.redirect_url">{{ 'SHARED.FORWARD' | transloco }}</a>
      }
    </span>
    <div class="card-date">{{ data.date | date: 'yyyy.MM.dd hh:mm' }}</div>
  </div>
  <div class="card-icon-top-right" (click)="onClose()">
    <app-icon [icon]="icon" [size]="size"></app-icon>
  </div>
</div>

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { IconComponent } from '@app/shared/components/icon/icon.component';
import { TranslocoPipe } from '@jsverse/transloco';

import { CardNotification } from './card-notification.model';

@Component({
  selector: 'app-card-notification',
  standalone: true,
  imports: [CommonModule, IconComponent, TranslocoPipe],
  templateUrl: './card-notification.component.html',
  styleUrl: './card-notification.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardNotificationComponent {
  @Input() data: CardNotification = {
    title: 'Kampány limit elérve',
    text: 'Az XYZ Kampány elérte a 80 000 Ft-os limitet',
    status: 'unread',
    redirect_url: 'https://example.com',
    date: new Date(),
  };
  @Input() icon: string = 'icon-close';
  @Input() size: number = 14;

  @Output() closeCardNotification = new EventEmitter<void>();

  getClasses(): string[] {
    const classes = [];
    switch (this.data.status) {
      case 'unread':
        classes.push('unread');
        break;
      case 'read':
        classes.push('read');
        break;
      case 'archived':
        classes.push('archived');
        break;
    }
    return classes;
  }

  onClose(): void {
    this.closeCardNotification.emit();
  }
}

@use 'shared' as *;

:host {
  display: block;
}
.card {
  max-width: 100%;
  margin-bottom: 8px;
  .card-title {
    font-weight: 500;
  }
  &.unread {
    background: var(--color-grey-50);
    .card-title {
      font-weight: 700;
    }
  }
  &.archived {
    opacity: 0.6;
  }
  &-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-readmore {
    color: var(--color-purple-500);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-top: 4px;
    &:hover {
      text-decoration: underline;
    }
  }
  &-date {
    color: var(--color-grey-700);
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
  }
  &-notification {
    cursor: pointer;
    &:hover {
      background-color: var(--color-grey-100);
    }
  }
}