jehoelkh

src/app/components/create-author/create-author.html

@@ -1 +0,0 @@
-<p>create-author works!</p>

src/app/components/create-author/create-author.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-create-author',
-  imports: [],
-  templateUrl: './create-author.html',
-  styleUrl: './create-author.css',
-})
-export class CreateAuthor {
-
-}

src/app/components/create-book/create-book.ts

@@ -7,7 +7,7 @@ import {NzFlexDirective} from "ng-zorro-antd/flex";
   selector: 'app-create-book',
     imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
   templateUrl: './create-book.html',
-  styleUrl: './create-book.css',
+  styleUrls: ['./create-book.css'],
 })
 export class CreateBook {
     createBookForm = new FormGroup({

src/app/components/create-loan/create-loan.html

@@ -1 +0,0 @@
-<p>create-loan works!</p>

src/app/components/create-loan/create-loan.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-create-loan',
-  imports: [],
-  templateUrl: './create-loan.html',
-  styleUrl: './create-loan.css',
-})
-export class CreateLoan {
-
-}

src/app/components/create-user/create-user.html

@@ -1 +0,0 @@
-<p>create-user works!</p>

src/app/components/create-user/create-user.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-create-user',
-  imports: [],
-  templateUrl: './create-user.html',
-  styleUrl: './create-user.css',
-})
-export class CreateUser {
-
-}

src/app/components/update-author/update-author.html

@@ -1 +0,0 @@
-<p>update-author works!</p>

src/app/components/update-author/update-author.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-update-author',
-  imports: [],
-  templateUrl: './update-author.html',
-  styleUrl: './update-author.css',
-})
-export class UpdateAuthor {
-
-}

src/app/components/update-loan/update-loan.html

@@ -1 +0,0 @@
-<p>update-loan works!</p>

src/app/components/update-loan/update-loan.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-update-loan',
-  imports: [],
-  templateUrl: './update-loan.html',
-  styleUrl: './update-loan.css',
-})
-export class UpdateLoan {
-
-}

src/app/components/update-user/update-user.html

@@ -1 +0,0 @@
-<p>update-user works!</p>

src/app/components/update-user/update-user.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-update-user',
-  imports: [],
-  templateUrl: './update-user.html',
-  styleUrl: './update-user.css',
-})
-export class UpdateUser {
-
-}

src/app/interfaces/book.interfaces.ts

@@ -0,0 +1,5 @@
+export interface BookInfo {
+    title: string;
+    releaseYear: number;
+    author: string;
+}

src/app/pages/book/book.css

@@ -0,0 +1,7 @@
+.book-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    justify-items: center;
+    padding: 20px;
+}

src/app/pages/book/book.html

@@ -1 +1,8 @@
-<p>book works!</p>
+<app-create-modal [content]="CreateBookComponent"></app-create-modal>
+
+<section class="book-grid">
+    @for (book of books; track $index) {
+        <app-book-card [bookInfo]="book"></app-book-card>
+    }
+</section>
+

src/app/pages/book/book.ts

@@ -1,11 +1,29 @@
 import { Component } from '@angular/core';
+import {BookInfo} from "../../interfaces/book.interfaces";
+import {BookCard} from "../../components/book-card/book-card";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {CreateModal} from "../../components/create-modal/create-modal";
+import {CreateBook} from "../../components/create-book/create-book";
 
 @Component({
   selector: 'app-book',
-  imports: [],
+    imports: [
+        BookCard,
+        NzModalComponent,
+        CreateModal
+    ],
   templateUrl: './book.html',
-  styleUrl: './book.css',
+  styleUrls: ['./book.css'],
 })
 export class Book {
+    CreateBookComponent = CreateBook;
 
+    books: BookInfo[] = [
+        { title: '1984', author: 'George Orwell', releaseYear: 1949 },
+        { title: 'Le Seigneur des Anneaux', author: 'J.R.R. Tolkien', releaseYear: 1954 },
+        { title: 'Dune', author: 'Frank Herbert', releaseYear: 1965 },
+        { title: 'Fahrenheit 451', author: 'Ray Bradbury', releaseYear: 1953 },
+        { title: 'Les Misérables', author: 'Victor Hugo', releaseYear: 1862 },
+        { title: 'Harry Potter à l’école des sorciers', author: 'J.K. Rowling', releaseYear: 1997 },
+    ];
 }