display Comics as Artists

kontor-angular/src/app/kontor/comic/comic-artists/comic-artists.component.html

@@ -1,4 +1,3 @@
-<p>artists works!</p>
 <div class="grid-container">
   <div>
     <app-comic-artists-list />
@@ -34,3 +33,4 @@
     }
   </div>
 </div>
+

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.html

@@ -1,14 +1,26 @@
-<div class="parent">
+<div class="grid-container">
-    <div class="child">
+  <div>
     <app-comic-comics-list/>
   </div>
-    <div class="child">
+  <div>
-        <div class="float-details-element">
     @if (comic()) {
+      <section>
         <h2>{{ comic().title }}</h2>
+        <a href="{{ comic().weblink }}" style="background-color: green;">{{ comic().title }}</a>
+      </section>
+      @for (work of comic().works; track work.worktype.id) {
+        <section>
+          <app-comic-worktype [worktype]="work.worktype"/>
+            @for (artist of work.artists; track artist.id) {
+              <article>
+                <app-comic-artist [artist]="artist"/>
+              </article>
+            }
+        </section>
+      }
     } @else {
       <h2>Comic Details</h2>
     }
   </div>
-    </div>
 </div>
+

kontor-angular/src/app/kontor/comic/comic-comics/comic-comics.component.ts

@@ -3,10 +3,12 @@ import { ComicComicsListComponent } from "../comic-comics-list/comic-comics-list
 import { ComicDetails } from '../comic.model';
 import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from '@angular/router';
 import { ComicService } from './comic.service';
+import { ComicWorktypeComponent } from '../comic-worktype/comic-worktype.component';
+import { ComicArtistComponent } from '../comic-artist/comic-artist.component';
 
 @Component({
   selector: 'app-comic-comics',
-  imports: [ComicComicsListComponent],
+  imports: [ComicComicsListComponent, ComicWorktypeComponent, ComicArtistComponent],
   templateUrl: './comic-comics.component.html',
   styleUrl: './comic-comics.component.css'
 })

kontor-angular/src/app/kontor/comic/comic.model.ts

@@ -30,10 +30,17 @@ export interface Issue {
     volume: Volume | undefined
 
 }
+
 export interface ComicWork {
   worktype: string;
 
 }
+
+export interface ComicWorktypeArtists {
+  worktype: Worktype;
+  artists: Artist[];
+}
+
 export interface ComicDetails {
   id: string;
   created: string;
@@ -45,6 +52,7 @@ export interface ComicDetails {
   volumes: [
     name: string,
   ];
+  works: ComicWorktypeArtists[];
 }
 
 export interface ArtistWorktypeComics {

kontor-angular/src/styles.css

@@ -67,3 +67,23 @@ a.active {
   background-color: royalblue;
   color: white;
 }
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+}
+
+section {
+    margin-left: 10px;
+    padding: 10px;
+    background-color: darkgrey;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+
+article {
+    margin-left: 10px;
+    padding: 5px;
+}
+