Added profile-header component. Implemented follower feature

This commit is contained in:
2026-01-11 13:00:23 +01:00
parent c6008cf84b
commit c1d401d2a9
13 changed files with 347 additions and 11 deletions

View File

@@ -0,0 +1,56 @@
<div class="card">
<div class="card-image">
<div class="image app-profile-header-cover" [class.is-skeleton]="!userStore.isUserLoaded()">
<!-- Todo change cover image -->
<img src="https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg" alt="">
</div>
</div>
<div class="card-content">
<!-- Avatar -->
<div class="image is-128x128 app-profile-header-avatar block" [class.is-skeleton]="!userStore.isUserLoaded()">
<img [src]="userStore.getAvatarUrl()" [alt]="userStore.getUserFullName()" class="is-rounded">
</div>
<!-- Main -->
<div class="block">
<div class="level">
<!-- Name -->
<div class="level-left">
<div class="level-item">
<div class="block app-profile-name">
<p class="title is-3" [class.is-skeleton]="!userStore.isUserLoaded()">{{ userStore.getUserFullName() }}</p>
<p class="subtitle is-5" [class.is-skeleton]="!userStore.isUserLoaded()">{{ userStore.user()?.headline }}</p>
</div>
</div>
</div>
<!-- Featured -->
@if (userStore.isUserLoaded()){
<div class="level-right">Featured</div>
}
</div>
</div>
<!-- Actions -->
<div class="block">
@if (userStore.isCurrentUser()){
<div class="buttons">
<button type="button" matButton="outlined">Edit profile</button>
</div>
} @else {
<div class="buttons">
@if (followerStore.isLoaded()){
@if (followerStore.isSubscribed()){
<!-- Subscribed -->
<button type="button" matButton="outlined" (click)="onUnfollowClicked()">Unfollow</button>
} @else {
<!-- Not subscribed -->
<button type="button" matButton="filled" (click)="onFollowClicked()">Follow</button>
}
}
</div>
}
</div>
</div>
</div>