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>
|
||||
} 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 {
|
||||
|
|
Loading…
Reference in a new issue