From 3e7dc3d9ff15dc6ebe9e4fd5de75450d056668e4 Mon Sep 17 00:00:00 2001
From: Mia Winter <mia@miawinter.de>
Date: Thu, 8 Feb 2024 15:51:20 +0100
Subject: [PATCH] Added ArticleCard and ArticleCardList

---
 Wave/Components/ArticleCard.razor        | 28 ++++++++++++++++++++++
 Wave/Components/ArticleCardList.razor    | 16 +++++++++++++
 Wave/Components/Pages/CategoryView.razor | 30 ++----------------------
 3 files changed, 46 insertions(+), 28 deletions(-)
 create mode 100644 Wave/Components/ArticleCard.razor
 create mode 100644 Wave/Components/ArticleCardList.razor

diff --git a/Wave/Components/ArticleCard.razor b/Wave/Components/ArticleCard.razor
new file mode 100644
index 0000000..1fee777
--- /dev/null
+++ b/Wave/Components/ArticleCard.razor
@@ -0,0 +1,28 @@
+@using Wave.Data
+
+<article class="card card-side card-compact bg-base-200 text-base-content">
+	<figure class="shrink-0 max-md:!hidden sm:max-w-40">
+		<ArticleLink Article="Article">
+			<img src="/api/user/pfp/@Article.Author.Id" alt="" width="800">
+		</ArticleLink>
+	</figure>
+	<div class="card-body">
+		<ArticleLink Article="Article">
+			<h2 class="card-title">@Article.Title</h2>
+			<small>@Article.PublishDate.ToString("d")</small>
+			<p class="line-clamp-2">
+				@Article.Body
+			</p>
+		</ArticleLink>
+		<div class="card-actions flex flex-wrap gap-2">
+			@foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
+				<CategoryBadgeComponent Category="category" />
+			}
+		</div>
+	</div>
+</article>
+
+@code {
+	[Parameter]
+	public required Article Article { get; set; }
+}
diff --git a/Wave/Components/ArticleCardList.razor b/Wave/Components/ArticleCardList.razor
new file mode 100644
index 0000000..25eb639
--- /dev/null
+++ b/Wave/Components/ArticleCardList.razor
@@ -0,0 +1,16 @@
+@using Wave.Data
+
+@if (Articles.Count < 1) {
+	<p>No Articles</p>
+} else {
+	<div class="flex flex-col gap-4">
+		@foreach (var article in Articles) {
+			<ArticleCard Article="article" />
+		}
+	</div>
+}
+
+@code {
+	[Parameter]
+	public required IList<Article> Articles { get; set; } = [];
+}
diff --git a/Wave/Components/Pages/CategoryView.razor b/Wave/Components/Pages/CategoryView.razor
index 58107a2..601af63 100644
--- a/Wave/Components/Pages/CategoryView.razor
+++ b/Wave/Components/Pages/CategoryView.razor
@@ -14,34 +14,8 @@
 	<a class="btn btn-primary" href="/">@Localizer["NotFound_BackToHome_Label"]</a>
 } else {
 	<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"] - @Category.Name</h1>
-	if (Category.Articles.Count < 1) {
-		<p>No Articles</p>
-	}
-	<div class="flex flex-col gap-4">
-		@foreach (var article in Category.Articles) {
-			<article class="card card-side card-compact bg-base-200 text-base-content">
-				<figure class="shrink-0 max-md:!hidden sm:max-w-40">
-					<ArticleLink Article="article">
-						<img src="/api/user/pfp/@article.Author.Id" alt="" width="800">
-					</ArticleLink>
-				</figure>
-				<div class="card-body">
-					<ArticleLink Article="article">
-						<h2 class="card-title">@article.Title</h2>
-						<small>@article.PublishDate.ToString("d")</small>
-						<p class="line-clamp-2">
-							@article.Body
-						</p>
-					</ArticleLink>
-					<div class="card-actions flex flex-wrap gap-2">
-						@foreach (var category in article.Categories.OrderBy(c => c.Color)) {
-							<CategoryBadgeComponent Category="category" />
-						}
-					</div>
-				</div>
-			</article>
-		}
-	</div>
+	
+	<ArticleCardList Articles="Category.Articles" />
 }
 
 @code {