Feat: Basic styling finished

src/app/books/book-detail/book-detail.component.html

@@ -0,0 +1,27 @@
+<div class="row">
+  <div class="col-xs-12">
+    <img src="" alt="" class="img-responsive">
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <h1>Book Name</h1>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <div class="btn-group">
+      <p-dropdown [options]="options" [(ngModel)]="option" optionLabel="option" [showClear]="true" placeholder="Manage Book"></p-dropdown>
+    </div>
+  </div>
+</div>
+<div class="flex flex-row flex-wrap justify-content-center h-10rem">
+  <div class="">
+    Description
+  </div>
+</div>
+<div class="flex flex-row flex-wrap justify-content-center h-10rem">
+  <div class="">
+    Ingredients
+  </div>
+</div>

src/app/books/book-detail/book-detail.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { DropdownModule } from 'primeng/dropdown';
+import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+
+interface Options {
+  name: string;
+}
+@Component({
+  standalone: true,
+  selector: 'app-book-detail',
+  templateUrl: './book-detail.component.html',
+  styleUrls: ['./book-detail.component.css'],
+  imports: [DropdownModule, CommonModule, FormsModule]
+})
+export class BookDetailComponent implements OnInit {
+
+  constructor() { }
+
+  options: Options[] | undefined;
+
+  option: Options| undefined;
+
+  ngOnInit() {
+    this.options = [
+      { name: 'Edit Book'},
+      { name: 'Delete Book'},
+      { name: 'Add to Wish List'},
+    ];
+  }
+}

src/app/books/book-list/book-item/book-item.component.html

@@ -0,0 +1,3 @@
+<p>
+  book-item works!
+</p>

src/app/books/book-list/book-item/book-item.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  standalone: true,
+  selector: 'app-book-item',
+  templateUrl: './book-item.component.html',
+  styleUrls: ['./book-item.component.css']
+})
+export class BookItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/books/book-list/book-list.component.html

@@ -0,0 +1,26 @@
+<div class="row">
+  <div class="col-xs-12">
+    <p-button>New Book</p-button>
+  </div>
+</div>
+<hr>
+<div class="">
+  <div class="">
+    <div
+      class="list-group-item clearfix"
+      *ngFor="let book of books">
+      <p-card header="{{book.name}}" class="m-1">
+        <p class="m-0">
+          {{book.description}}
+          <img
+            [src]="book.imagePath"
+            alt="{{ book.name }}"
+            class="img-responsive"
+            style="max-height: 50px;">
+        </p>
+      </p-card>
+    </div>
+    <app-book-item></app-book-item>
+  </div>
+</div>
+

src/app/books/book-list/book-list.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Book } from '../book.model';
+import {BookItemComponent} from "./book-item/book-item.component";
+import {CommonModule} from "@angular/common";
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+
+@Component({
+  standalone: true,
+  selector: 'app-book-list',
+  templateUrl: './book-list.component.html',
+  imports: [
+    BookItemComponent,
+    CommonModule,
+    ButtonModule,
+    CardModule
+  ],
+  styleUrls: ['./book-list.component.css']
+})
+export class BookListComponent implements OnInit {
+  books: Book[] = [
+    new Book('A Test Book', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
+    new Book('A Test Book', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/books/book.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import {BookListComponent} from "./book-list/book-list.component";
+import {BookDetailComponent} from "./book-detail/book-detail.component";
+
+@Component({
+  standalone: true,
+  selector: 'app-books',
+  templateUrl: './books.component.html',
+  imports: [
+    BookListComponent,
+    BookDetailComponent
+  ],
+  styleUrls: ['./books.component.css']
+})
+export class BookComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/books/book.model.ts

@@ -0,0 +1,11 @@
+export class Book {
+  public name: string;
+  public description: string;
+  public imagePath: string;
+
+  constructor(name: string, desc: string, imagePath: string) {
+    this.name = name;
+    this.description = desc;
+    this.imagePath = imagePath;
+  }
+}

src/app/books/books.component.html

@@ -0,0 +1,8 @@
+<div class="flex flex-row flex-wrap justify-content-center">
+  <div class="w-4 m-4">
+    <app-book-list></app-book-list>
+  </div>
+  <div class="w-4 m-4">
+    <app-book-detail></app-book-detail>
+  </div>
+</div>