refactor: update podcast card styles, improve navigation layout, and implement search functionality

Author: geromegrignon

public/assets/data/podcast.json

@@ -50,7 +50,7 @@
     "description": "Welcome to Angular Catch-Up – your ultimate hub for everything Angular! "
   },
   {
-    "name": "Angular Japan User Group | Angular 日本ユーザー会",
+    "name": "Angular Japan User Group",
     "url": "https://www.youtube.com/@ng_japan",
     "logo": "assets/logos/ng-jp.svg",
     "language": "Japanese",

src/app/components/cards/podcast-card.ts

@@ -6,9 +6,9 @@ import { Podcast } from '../../../models/podcast.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <article
-      class="bg-gradient-to-br from-purple-900 to-purple-800 rounded-2xl p-6 text-white shadow-lg h-full"
+      class="rounded-2xl drop-shadow-xl p-6 bg-white h-full flex flex-col gap-4"
     >
-      <div class="flex items-start gap-4 mb-4">
+      <div class="flex items-start gap-4">
         <img
           class="rounded-xl flex-shrink-0"
           [src]="podcast().logo"
@@ -19,13 +19,13 @@ import { Podcast } from '../../../models/podcast.model';
         <div class="flex-1 min-w-0">
           <h3
             [attr.id]="podcast().name"
-            class="text-xl font-bold text-white mb-1"
+            class="text-lg font-bold mb-1"
             itemprop="title"
           >
             {{ podcast().name }}
           </h3>
           <span
-            class="inline-flex items-center justify-center gap-1 bg-purple-800/50 border-purple-600 border rounded px-2 py-1 text-xs text-purple-200"
+            class="inline-flex items-center justify-center gap-1 bg-gray-100 rounded px-2 py-1 text-xs"
           >
             <i class="pi pi-language text-xs" aria-hidden="true"></i>
             {{
@@ -35,27 +35,21 @@ import { Podcast } from '../../../models/podcast.model';
         </div>
       </div>
 
-      <p class="text-purple-100 text-sm mb-4 leading-relaxed">
+      <p class="text-sm leading-relaxed flex-1">
         A weekly podcast dedicated to the Angular JavaScript framework and
         related technologies.
       </p>
 
-      <button
-        class="flex items-center justify-between w-full text-left group"
-        (click)="openPodcast($event)"
+      <a
+        [href]="podcast().url"
+        class="flex items-center justify-between w-full hover:text-purple-100"
+        target="_blank"
       >
         <div class="flex items-center gap-3">
-          <div
-            class="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center group-hover:bg-purple-500 transition-colors"
-          >
-            <i class="pi pi-play text-white text-xs"></i>
-          </div>
-          <span
-            class="font-medium text-purple-100 group-hover:text-white transition-colors"
-            >Listen Now</span
-          >
+          <i class="pi pi-play-circle text-purple-600 text-2xl"></i>
+          <span class="font-medium text-purple-600">Listen Now</span>
         </div>
-      </button>
+      </a>
     </article>
   `,
   styles: [
@@ -70,9 +64,4 @@ import { Podcast } from '../../../models/podcast.model';
 })
 export class PodcastCard {
   podcast = input.required<Podcast>();
-
-  openPodcast(event: Event) {
-    event.preventDefault();
-    globalThis.window?.open(this.podcast().url, '_blank');
-  }
 }

src/app/components/navigation/navigation.html

@@ -1,9 +1,12 @@
 <nav class="px-8 py-2 flex items-center justify-between">
   <a class="flex items-center gap-4" routerLink="/">
-    <img class="h-12" src="/assets/images/logo.webp" alt="" />
+    <img class="h-8 lg:h-12" src="/assets/images/logo.webp" alt="" />
     <div class="flex flex-col">
-      <span class="title text-3xl">ANGULAR HUB</span>
-      <span class="text-sm text-gray-500">
+      <span class="title text-3xl flex items-center gap-2">
+        <span class="hidden md:block">ANGULAR</span>
+        <span>HUB</span>
+      </span>
+      <span class="hidden lg:block text-sm text-gray-500">
         The Angular community hub for events, communities, and podcasts
       </span>
     </div>
@@ -14,32 +17,32 @@
     <li>
       <a
         class="flex gap-4 items-center px-4 py-3 rounded-xl"
-        [routerLinkActive]="['bg-pink-200', 'text-pink-700']"
+        [routerLinkActive]="['bg-purple-200', 'text-purple-700']"
         [routerLinkActiveOptions]="{ exact: true }"
         routerLink="/"
       >
         <i aria-hidden="true" class="pi pi-calendar text-2xl"></i>
-        Events
+        <span class="hidden md:block">Events</span>
       </a>
     </li>
     <li>
       <a
         class="flex gap-4 items-center px-4 py-3 rounded-xl"
-        [routerLinkActive]="['bg-pink-200', 'text-pink-700']"
+        [routerLinkActive]="['bg-purple-200', 'text-purple-700']"
         routerLink="/communities"
       >
         <i aria-hidden="true" class="pi pi-users text-2xl"></i>
-        Communities
+        <span class="hidden md:block"> Communities </span>
       </a>
     </li>
     <li>
       <a
         class="flex gap-4 items-center px-4 py-3 rounded-xl"
-        [routerLinkActive]="['bg-pink-200', 'text-pink-700']"
+        [routerLinkActive]="['bg-purple-200', 'text-purple-700']"
         routerLink="/podcasts"
       >
         <i aria-hidden="true" class="pi pi-microphone text-2xl"></i>
-        Podcasts
+        <span class="hidden md:block"> Podcasts </span>
       </a>
     </li>
   </ul>

src/app/pages/communities-page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { CommunityCard } from '../components/cards/community-card';
 import { Title } from '@angular/platform-browser';
 import { JsonLdService } from '../services/json-ld.service';
@@ -19,51 +19,44 @@ export const routeMeta = {
 @Component({
   imports: [CommunityCard, FormsModule],
   template: `
-    <section class="max-w-screen-xl mx-auto">
+    <section class="max-w-screen-xl mx-auto px-6 lg:px-0">
       <input
         class="w-full p-2 rounded-lg border-2 border-gray-300"
         type="search"
         placeholder="Search communities"
+        [(ngModel)]="search"
       />
       <ul class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
-        @for (community of communities(); track community) {
+        @for (community of filteredCommunities(); track community) {
           <li>
-            <app-community-card
-              class="h-full"
-              [community]="community"
-            ></app-community-card>
+            <app-community-card class="h-full" [community]="community" />
           </li>
         }
-        <!--
-        @for (community of communitiesWithUpcomingEvents(); track community) {
-          <li>
-            <app-community-card [community]="community"></app-community-card>
-          </li>
-        }
-        @for (community of activeCommunities(); track community) {
-          <li>
-            <app-community-card [community]="community"></app-community-card>
-          </li>
-        }
-        @for (community of inactiveCommunities(); track community) {
-          <li>
-            <app-community-card [community]="community"></app-community-card>
-          </li>
-        }
-      -->
       </ul>
     </section>
   `,
 })
 export default class CommunitiesPage {
-  // TODO /api/v1/communities
+  search = signal('');
+
   communities = toSignal(
     inject(HttpClient).get<Community[]>('/api/v1/communities'),
     {
       initialValue: [],
     },
   );
 
+  filteredCommunities = computed(() =>
+    this.communities().filter(
+      (community) =>
+        community.name?.toLowerCase().includes(this.search().toLowerCase()) ||
+        community.location
+          ?.toLowerCase()
+          .includes(this.search().toLowerCase()) ||
+        community.type?.toLowerCase().includes(this.search().toLowerCase()),
+    ),
+  );
+
   /*
 
   communitiesWithUpcomingEvents = computed(() =>

src/app/pages/events-page.ts

@@ -39,7 +39,7 @@ export const routeMeta = {
 
 @Component({
   template: `
-    <section class="max-w-screen-xl w-full mx-auto">
+    <section class="max-w-screen-xl w-full mx-auto px-6 lg:px-0">
       <input
         class="w-full p-2 rounded-lg border-2 border-gray-300"
         type="search"
@@ -103,8 +103,13 @@ export default class EventsPage {
   );
 
   filteredEvents = computed(() => {
-    return this.events().filter((event) =>
-      event.name?.toLowerCase().includes(this.search().toLowerCase()),
+    return this.events().filter(
+      (event) =>
+        event.name?.toLowerCase().includes(this.search().toLowerCase()) ||
+        event.location?.toLowerCase().includes(this.search().toLowerCase()) ||
+        event.organizer?.name
+          ?.toLowerCase()
+          .includes(this.search().toLowerCase()),
     );
   });
 

src/app/pages/podcasts-page.ts

@@ -20,18 +20,17 @@ export const routeMeta = {
 };
 
 @Component({
-  imports: [PodcastCard, FormsModule, Banner],
+  imports: [PodcastCard, FormsModule],
   template: `
-    <app-banner description="Curated list of Angular Podcasts" />
-    <ul
-      class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 justify-center gap-x-8 gap-y-4 px-8"
-    >
-      @for (podcast of podcasts(); track podcast.name) {
-        <li>
-          <app-podcast-card [podcast]="podcast"></app-podcast-card>
-        </li>
-      }
-    </ul>
+    <section class="max-w-screen-xl w-full mx-auto px-6 lg:px-0">
+      <ul class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
+        @for (podcast of podcasts(); track podcast.name) {
+          <li>
+            <app-podcast-card [podcast]="podcast" />
+          </li>
+        }
+      </ul>
+    </section>
   `,
 })
 export default class PodcastsPage {