feat: revamp dashboard mensa section

src/app/modules/dashboard/sections/news-section/news-section.component.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -20,26 +20,13 @@
   class="is-editable"
   (onEdit)="onMoreNewsClicked()"
 >
-  <swiper
-    [config]="sliderOptions"
-    slidesPerView="auto"
-    [navigation]="true"
-    *ngIf="news.length > 0"
-    class="news-swiper card-swiper"
-  >
-    <ng-template swiperSlide *ngFor="let newsItem of news">
-      <a [routerLink]="['/data-detail', newsItem.uid]" class="card">
-        <ion-img [src]="newsItem.image"></ion-img>
-        <ion-label>{{ newsItem.name }}</ion-label>
-      </a>
-    </ng-template>
-    <ng-template swiperSlide>
-      <a [routerLink]="['/news']" class="card more-news">
-        <ion-label>{{ 'dashboard.news.moreNews' | translate | titlecase }}</ion-label>
-        <ion-thumbnail class="ion-margin-end">
-          <ion-icon color="dark" name="read_more" size="128"></ion-icon>
-        </ion-thumbnail>
-      </a>
-    </ng-template>
-  </swiper>
+  <simple-swiper class="news-swiper card-swiper" *ngIf="news" @fade>
+    <stapps-news-item *ngFor="let newsItem of news" [item]="newsItem"> </stapps-news-item>
+    <ion-item [routerLink]="['/news']" class="more-news" lines="none">
+      <ion-label>{{ 'dashboard.news.moreNews' | translate | titlecase }}</ion-label>
+      <ion-thumbnail class="ion-margin-end">
+        <ion-icon color="medium" name="read_more" size="150"></ion-icon>
+      </ion-thumbnail>
+    </ion-item>
+  </simple-swiper>
 </stapps-section>