Merge pull request #40 from computebender/39-update-article-card-style

Refactor article card grid and article card components

src/app/component/article-card-grid/article-card-grid.component.html

@@ -1,7 +1,9 @@
 <div
-  class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-4 gap-y-8"
+  class="grid auto-rows-auto grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
 >
   @for (article of articles; track article.id) {
-  <app-article-card [article]="article" />
-  } @empty { Empty list of users }
+    <app-article-card [article]="article" />
+  } @empty {
+    Empty list of users
+  }
 </div>

src/app/component/article-card/article-card.component.html

@@ -1,6 +1,19 @@
-<div class="p-6 border border-solid border-slate-600">
-  <p class="font-bold font-sans">{{ article.title }}</p>
-  <p>{{ article.summary }}</p>
-  <p>{{ article.id }}</p>
-  <a [routerLink]="['/blog', article.id, article.slug]">Article</a>
+<div
+  class="flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border border-solid border-slate-300 transition-all hover:bg-slate-50 hover:shadow-lg active:bg-slate-100 active:shadow-md"
+  (click)="onCardClick()"
+>
+  <!-- Image Section -->
+  <div class="h-40 w-full shadow-md">
+    <img
+      [src]="article.coverImage || 'https://picsum.photos/300/200'"
+      alt="Article Image"
+      class="h-full w-full object-cover"
+    />
+  </div>
+
+  <!-- Text Section -->
+  <div class="grow px-4">
+    <h2 class="mb-2 truncate text-lg font-bold">{{ article.title }}</h2>
+    <p class="line-clamp-3 text-gray-600">{{ article.summary }}</p>
+  </div>
 </div>

src/app/component/article-card/article-card.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { RouterLinkWithHref } from '@angular/router';
+import { Component, Input, inject } from '@angular/core';
+import { Router, RouterLinkWithHref } from '@angular/router';
 import { Article } from '../../model/article.model';
 
 @Component({
@@ -11,4 +11,10 @@ import { Article } from '../../model/article.model';
 })
 export class ArticleCardComponent {
   @Input({ required: true }) article!: Article;
+
+  private router = inject(Router);
+
+  onCardClick() {
+    this.router.navigate(['/blog', this.article.id, this.article.slug]);
+  }
 }

src/app/model/article.model.ts

@@ -6,6 +6,7 @@ export interface Article {
   summary: string;
   slug: string;
   isActive: boolean;
+  coverImage?: string;
 }
 
 export interface ArticlesResponse {