Implemented ProfilePill

Wave/Components/Pages/ArticleView.razor

@@ -7,10 +7,12 @@
 <PageTitle>Wave - @Article.Title</PageTitle>
 
 <h1 class="text-3xl lg:text-5xl font-light mb-6">@Article.Title</h1>
-<p class="text-sm mb-3">By @Article.Author.Name</p>
+<div class="flex gap-2 mb-6">
-@if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
+    <ProfilePill Profile="Article.Author" RoleTag="Author" />
-    <p class="text-sm mb-3">Reviewed by @Article.Reviewer.Name</p>
+    @if (Article.Reviewer is not null && Article.Reviewer.Id != Article.Author.Id) {
-}
+        <ProfilePill Profile="Article.Reviewer" RoleTag="Reviewer" />
+    }
+</div>
 
 <div class="prose">
     @Content

Wave/Components/ProfilePill.razor

@@ -0,0 +1,21 @@
+@using Wave.Data
+
+<div class="rounded bg-base-200 p-2 flex gap-4 justify-center">
+    <div class="w-12 h-12">
+        <ProfilePictureComponent ProfileId="@Profile.Id" />
+    </div>
+
+    <div class="flex flex-col">
+        @Profile.Name
+        @if (RoleTag is not null) {
+            <span class="badge badge-sm badge-primary">@RoleTag</span>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public required ApplicationUser Profile { get; set; }
+    [Parameter]
+    public string? RoleTag { get; set; }
+}