refactor: move libs

apps/angular/44-view-transition/src/app/blog/blog.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { posts } from '../data';
+import { ThumbnailComponent } from './thumbnail.component';
+
+@Component({
+  selector: 'blog',
+  standalone: true,
+  imports: [ThumbnailComponent],
+  template: `
+    <div
+      class="fixed left-0  right-0 top-0 z-50 flex h-20 items-center justify-center border-b-2 bg-white text-4xl shadow-md">
+      Blog List
+    </div>
+    <div class="my-20 flex h-screen flex-col items-center gap-10 border p-10">
+      @for (post of posts; track post.id) {
+        <blog-thumbnail [post]="post" />
+      }
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class BlogComponent {
+  posts = posts;
+}

apps/angular/44-view-transition/src/app/blog/thumbnail-header.component.ts

@@ -0,0 +1,29 @@
+import { NgOptimizedImage } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'thumbnail-header',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    <div class="flex gap-3">
+      <img
+        ngSrc="assets/profil.webp"
+        alt=""
+        class="rounded-full border border-black p-0.5"
+        width="50"
+        height="50" />
+      <div class="flex flex-col justify-center gap-0.5">
+        <span class="text-md font-bold uppercase">Thomas Laforge</span>
+        <span class="text-sm">{{ date() }}</span>
+      </div>
+    </div>
+    <img ngSrc="assets/angular.webp" alt="" width="50" height="50" />
+  `,
+  host: {
+    class: 'flex w-full px-4 py-5 gap-4 justify-between',
+  },
+})
+export class ThumbnailHeaderComponent {
+  date = input.required<string>();
+}

apps/angular/44-view-transition/src/app/blog/thumbnail.component.ts

@@ -0,0 +1,32 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { RouterLinkWithHref } from '@angular/router';
+import { Post } from '../post.model';
+import { ThumbnailHeaderComponent } from './thumbnail-header.component';
+
+@Component({
+  selector: 'blog-thumbnail',
+  standalone: true,
+  imports: [NgOptimizedImage, ThumbnailHeaderComponent, RouterLinkWithHref],
+  template: `
+    <a [routerLink]="['post', post().id]">
+      <img
+        [ngSrc]="post().image"
+        alt=""
+        width="960"
+        height="540"
+        class="rounded-t-3xl"
+        [priority]="post().id === '1'" />
+      <h2 class="p-3 text-3xl">{{ post().title }}</h2>
+      <p class="p-3">{{ post().description }}</p>
+      <thumbnail-header [date]="post().date" />
+    </a>
+  `,
+  host: {
+    class: 'w-full  max-w-[600px] rounded-3xl border-none shadow-lg',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThumbnailComponent {
+  post = input.required<Post>();
+}