Added ArticleCard and ArticleCardList
This commit is contained in:
parent
ae8d44a59c
commit
3e7dc3d9ff
28
Wave/Components/ArticleCard.razor
Normal file
28
Wave/Components/ArticleCard.razor
Normal 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; }
|
||||||
|
}
|
16
Wave/Components/ArticleCardList.razor
Normal file
16
Wave/Components/ArticleCardList.razor
Normal 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; } = [];
|
||||||
|
}
|
|
@ -14,34 +14,8 @@
|
||||||
<a class="btn btn-primary" href="/">@Localizer["NotFound_BackToHome_Label"]</a>
|
<a class="btn btn-primary" href="/">@Localizer["NotFound_BackToHome_Label"]</a>
|
||||||
} else {
|
} else {
|
||||||
<h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"] - @Category.Name</h1>
|
<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>
|
<ArticleCardList Articles="Category.Articles" />
|
||||||
}
|
|
||||||
<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>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
|
|
Loading…
Reference in a new issue