Small UI fixing

jambotron-ui/src/app/components/home/home.component.html

@@ -1,10 +1,123 @@
-<div class="container">
-    <header class="jumbotron">
-      <p>{{ content }}</p>
-    </header>
-  </div>
+<p-splitter [style]="{ height: '300px' }" styleClass="mb-8" layout="vertical">
+  <ng-template #panel>
+    <div class="flex items-center justify-center h-full">Panel 1</div>
+  </ng-template>
+  <ng-template #panel>
+    <div class="flex items-center justify-center h-full">Panel 2</div>
+    <p-scrollPanel [style]="{ width: '100%', height: '150px' }">
 
-<mat-card  appearance="outlined" >
+
+      <p>
+        Lorem ipsum dolor sit amet...
+      </p>
+      <p>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
+      </p>
+      <p class="m-0">
+        At vero eos et accusamus et iusto odio dignissimos...
+        dfsd
+        f
+        sdf
+
+        dsf
+        sd
+        f
+        sd
+        fs
+        fs
+        fsfs
+        fs
+        fs
+        fs
+        fs
+        fs
+      </p>
+      <app-article-comments />
+    </p-scrollPanel>
+
+
+  </ng-template>
+</p-splitter>
+
+<p-scrollPanel [style]="{ width: '100%', height: '150px' }">
+
+
+  <p>
+    Lorem ipsum dolor sit amet...
+  </p>
+  <p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
+  </p>
+  <p class="m-0">
+    At vero eos et accusamus et iusto odio dignissimos...
+    dfsd
+    f
+    sdf
+
+    dsf
+    sd
+    f
+    sd
+    fs
+    fs
+    fsfs
+    fs
+    fs
+    fs
+    fs
+    fs
+  </p>
+  <app-article-comments />
+</p-scrollPanel>
+
+
+
+
+<!--
+@defer (on viewport(container); prefetch on idle) {
+  <app-article-comments></app-article-comments>
+} @loading {
+  <mat-progress-spinner></mat-progress-spinner>
+
+  loading
+} @placeholder {
+  <div class="skeleton-loader"></div>
+
+  <app-article-comments></app-article-comments>
+  placeholder
+} @error {
+  Error
+}
+
+
+<div #container>
+  <h1>How I feel about Angular</h1>
+  <article>
+    <p>
+      Angular is my favorite framework, and
+      this is why. Angular has the coolest
+      deferrable view feature that makes defer
+      loading content the easiest and most
+      ergonomic it could possibly be.
+    </p>
+  </article>
+
+  @defer {
+    <app-article-comments />
+  } @placeholder (minimum 1s) {
+    <p>Placeholder for comments</p>
+  } @loading (minimum 1s; after 500ms) {
+    <p>Loading comments...</p>
+  } @error {
+    <p>Failed to load comments</p>
+  }
+
+</div>
+
+<ng-container [ngComponentOutlet]="profileComponent()" />
+-->
+
+<mat-card #showComments  appearance="outlined" >
   <mat-card-header>
     <mat-card-title>Tutorials</mat-card-title>
   </mat-card-header>
@@ -14,6 +127,16 @@
     </mat-card-content>
 </mat-card>
 
+@defer (on hover; on interaction(showComments)) {
+  <app-article-comments />
+} @placeholder ( ;minimum 1s) {
+  <p>Placeholder for comments</p>
+} @loading (minimum 1s; after 500ms) {
+  <p>Loading comments...</p>
+} @error {
+  <p>Failed to load comments</p>
+}
+
 @for (tutorial of tutorials; track $index){
   <mat-card appearance="outlined" class="tutorial-card">
     <mat-card-content [innerHTML]="tutorial.description">

jambotron-ui/src/app/components/home/home.component.scss

@@ -1,5 +1,6 @@
 mat-card{
   margin: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
 }
 mat-card-title{
   color: cyan;

jambotron-ui/src/app/components/home/home.component.ts

@@ -1,8 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, computed, OnInit} from '@angular/core';
 import {TutorialService} from '../../services/tutorial.service';
 
 import {Tutorial} from '../../models/tutorial.model';
-
+import {ArticleComments} from '../article-comments/article-comments';
+import {AddTutorialComponent} from '../add-tutorial/add-tutorial.component';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
 
 @Component({
     selector: 'app-home',
@@ -31,4 +33,6 @@ export class HomeComponent implements OnInit {
           console.log(error);
         });
   }
+
+  profileComponent = computed(() => AddTutorialComponent);
 }

jambotron-ui/src/app/components/tutorials-list/tutorials-list.component.scss

@@ -2,4 +2,5 @@
   text-align: left;
   max-width: 750px;
   margin: auto;
-}
+}
+