Added ArticleCard and ArticleCardList

This commit is contained in:
Mia Rose Winter 2024-02-08 15:51:20 +01:00
parent ae8d44a59c
commit 3e7dc3d9ff
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
3 changed files with 46 additions and 28 deletions

View file

@ -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; }
}

View file

@ -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; } = [];
}

View file

@ -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 {