feat: save

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

@@ -8,10 +8,10 @@ import { ThumbnailComponent } from './thumbnail.component';
   imports: [ThumbnailComponent],
   template: `
     <div
-      class="flex h-20  items-center justify-center border-b-2 text-4xl shadow-md">
+      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="flex h-screen flex-col items-center gap-10 border p-10">
+    <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" />
       }

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

@@ -5,6 +5,7 @@ import {
   computed,
   input,
 } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { ThumbnailHeaderComponent } from '../blog/thumbnail-header.component';
 import { fakeTextChapters, posts } from '../data';
 import { PostHeaderComponent } from './post-header.component';
@@ -12,9 +13,19 @@ import { PostHeaderComponent } from './post-header.component';
 @Component({
   selector: 'post',
   standalone: true,
-  imports: [ThumbnailHeaderComponent, NgOptimizedImage, PostHeaderComponent],
+  imports: [
+    ThumbnailHeaderComponent,
+    NgOptimizedImage,
+    PostHeaderComponent,
+    RouterLink,
+  ],
   template: `
-    <div class="w-full max-w-[800px]">
+    <div class="relative w-full max-w-[800px]">
+      <button
+        routerLink="/"
+        class="absolute left-2 top-2 z-20 rounded-md border bg-white p-2">
+        Back
+      </button>
       <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" />