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