updated author's forms

src/app/pages/author/author.css

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

src/app/pages/author/author.html

@@ -1 +1,10 @@
-<p>author works!</p>
+<app-modal [name]="'Ajouter un auteur'">
+    <app-create-author></app-create-author>
+</app-modal>
+
+<section class="author-grid">
+    @for (author of authors; track $index) {
+        <app-author-card [authorInfo]="author"></app-author-card>
+    }
+</section>
+

src/app/pages/author/author.ts

@@ -1,11 +1,29 @@
-import {Component} from '@angular/core';
+import {Component, input} from '@angular/core';
+import {CreateAuthor} from "../../components/create-author/create-author";
+import {Modal} from "../../components/modal/modal";
+import {AuthorInfo} from "../../interfaces/author.interfaces";
+import {AuthorCard} from "../../components/author-card/author-card";
 
 @Component({
     selector: 'app-author',
-    imports: [],
+    imports: [
+        CreateAuthor,
+        Modal,
+        AuthorCard
+    ],
     templateUrl: './author.html',
     styleUrl: './author.css',
 })
 export class Author {
+    authorInfo = input.required<AuthorInfo>();
+
+    authors: AuthorInfo[] = [
+        { name: 'Victor', firstName: 'Hugo' },
+        { name: 'J.K.', firstName: 'Rowling' },
+        { name: 'J.R.R.', firstName: 'Tolkien' },
+        { name: 'Frank', firstName: 'Herbert' },
+        { name: 'Ray', firstName: 'Bradbury' },
+        { name: 'George ', firstName: 'Orwell' }
+    ];
 
 }