feat: create challenge 44

apps/angular/view-transition/src/app/post/post-header.component.ts

@@ -0,0 +1,34 @@
+import { NgOptimizedImage } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'post-header',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    <!--    <div class="flex flex-col gap-3">-->
+    <div class="relative">
+      <img
+        ngSrc="assets/profil.webp"
+        alt=""
+        class="rounded-full border border-black p-0.5"
+        width="50"
+        height="50" />
+      <img
+        ngSrc="assets/angular.webp"
+        alt=""
+        width="30"
+        height="30"
+        class="absolute -bottom-2 -right-2" />
+    </div>
+    <span class="text-md mt-2 font-bold uppercase">Thomas Laforge</span>
+    <span class="text-sm">{{ date() }}</span>
+    <!--    </div>-->
+  `,
+  host: {
+    class: 'flex flex-col justify-center items-center',
+  },
+})
+export class PostHeaderComponent {
+  date = input.required<string>();
+}

apps/angular/view-transition/src/app/post/post.component.ts

@@ -0,0 +1,36 @@
+import { NgOptimizedImage } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { ThumbnailHeaderComponent } from '../blog/thumbnail-header.component';
+import { fakeTextChapters, posts } from '../data';
+import { PostHeaderComponent } from './post-header.component';
+
+@Component({
+  selector: 'post',
+  standalone: true,
+  imports: [ThumbnailHeaderComponent, NgOptimizedImage, PostHeaderComponent],
+  template: `
+    <div class="w-full max-w-[800px]">
+      <img [ngSrc]="post().image" alt="" width="960" height="540" />
+      <h2 class="p-7 text-center text-5xl">{{ post().title }}</h2>
+      <post-header [date]="post().date" class="mb-20" />
+      @for (chapter of fakeTextChapter; track $index) {
+        <p class="mt-6 px-3">{{ chapter }}</p>
+      }
+    </div>
+  `,
+  host: {
+    class: 'flex h-full justify-center',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class PostComponent {
+  id = input.required<string>();
+  post = computed(() => posts.filter((p) => p.id === this.id())[0]);
+
+  fakeTextChapter = fakeTextChapters;
+}