80 lines
3.9 KiB
HTML
80 lines
3.9 KiB
HTML
<ion-segment>
|
|
<ion-segment-button value="first" content-id="global">
|
|
<ion-label>Général</ion-label>
|
|
</ion-segment-button>
|
|
<ion-segment-button value="second" content-id="friends">
|
|
<ion-label>Amis</ion-label>
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
<ion-segment-view>
|
|
<ion-segment-content id="global">
|
|
@for (post of localPosts(); track post.id) {
|
|
<ion-item lines="full">
|
|
<div class="mt-2">
|
|
<div class="flex items-center gap-2 p-3">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
|
|
{{ post.username.substring(0, 2) }}
|
|
</div>
|
|
<span class="text-lg font-mono ml-2">{{ post.username }}</span>
|
|
</div>
|
|
|
|
<div class="aspect-square overflow-hidden p-1">
|
|
<img [src]="post.proof"
|
|
alt=""
|
|
class="w-full h-full object-cover"/>
|
|
</div>
|
|
|
|
<div class="px-3 py-3">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<button class="flex items-center p-0 bg-transparent border-none cursor-pointer"
|
|
(click)="likePost(post.id)">
|
|
@if (post.isLiked) {
|
|
<ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
|
|
} @else {
|
|
<ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
|
|
}
|
|
</button>
|
|
<span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
|
|
</div>
|
|
</div>
|
|
</ion-item>
|
|
}
|
|
</ion-segment-content>
|
|
<ion-segment-content id="friends">
|
|
@for (post of postsFriends(); track post.id) {
|
|
<ion-item lines="full">
|
|
<div class="mt-2">
|
|
<div class="flex items-center gap-2 p-3">
|
|
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
|
|
{{ post.username.substring(0, 2) }}
|
|
</div>
|
|
<span class="text-lg font-mono ml-2">{{ post.username }}</span>
|
|
</div>
|
|
|
|
<div class="aspect-square overflow-hidden p-1">
|
|
<img [src]="post.proof"
|
|
alt=""
|
|
class="w-full h-full object-cover"/>
|
|
</div>
|
|
|
|
<div class="px-3 py-3">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<button class="flex items-center p-0 bg-transparent border-none cursor-pointer"
|
|
(click)="likePost(post.id)">
|
|
@if (post.isLiked) {
|
|
<ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
|
|
} @else {
|
|
<ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
|
|
}
|
|
</button>
|
|
<span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
|
|
</div>
|
|
</div>
|
|
</ion-item>
|
|
}
|
|
</ion-segment-content>
|
|
</ion-segment-view> |