feat: save

Author: tomalaforge

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,16 +5,27 @@ 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';
 
 @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" />