update UI post card

Author: Fxdonad

src/app/core/services/config-service/api.enpoints.ts

@@ -12,7 +12,7 @@ export const version = 'v1';
 
 export const API_CONFIG = {
   BASE_URLS: {
-    MAIN_API: environment.IP_SERVER, //chạy ở local thì đổi ip thành IP_SERVER_LOCAL và thêm "+ version" vào chuỗi MAIN_API (sau IP). push lên github nhớ stash commit hoặc không làm thay đổi dòng này.
+    MAIN_API: environment.IP_SERVER_LOCAL + version, //chạy ở local thì đổi ip thành IP_SERVER_LOCAL và thêm "+ version" vào chuỗi MAIN_API (sau IP). push lên github nhớ stash commit hoặc không làm thay đổi dòng này.
     SECONDARY_API: '',
   },
   ENDPOINTS: {

src/app/shared/components/my-shared/post-card/post-card.html

@@ -26,9 +26,22 @@ <h2 class="post-card__title">{{ post.title | truncate :35}}</h2>
 
     @if (post.tags.length) {
     <div class="post-card__tags">
-      @for (tag of post.tags; track trackByFn($index, tag)) {
+      @for (tag of post.tags.slice(0, 3); track trackByFn($index, tag)) {
       <span class="post-card__tag">#{{ tag }}</span>
       }
+
+      <div style="position: relative">
+        <app-tooltip
+          [content]="(post.tags || []).slice(3).join(', ')"
+          [position]="'bottom'"
+          [delay]="0.5"
+          [distance]="50"
+        >
+          @if ((post.tags.length || 0) > 3) {
+          <span class="tag other"> +{{ (post.tags.length || 0) - 3 }} </span>
+          }
+        </app-tooltip>
+      </div>
     </div>
     }
   </main>

src/app/shared/components/my-shared/post-card/post-card.ts

@@ -16,13 +16,14 @@ import {
 import { MarkdownModule, MarkdownService } from 'ngx-markdown';
 
 import hljs from 'highlight.js';
+import { Tooltip } from '../../fxdonad-shared/tooltip/tooltip';
 
 @Component({
   selector: 'app-post-card',
   templateUrl: './post-card.html',
   styleUrls: ['./post-card.scss'],
   standalone: true,
-  imports: [CommonModule, TruncatePipe, MarkdownModule],
+  imports: [CommonModule, TruncatePipe, MarkdownModule, Tooltip],
   changeDetection: ChangeDetectionStrategy.OnPush, // Tối ưu hiệu suất
 })
 export class PostCardComponent {