change page presentation

projects/doc/src/app/pages/buttons-page/buttons-page.component.html

@@ -1,17 +1,11 @@
-
-<div>
-  Square 3d button
-
+<wtd-presentation-container title="Square 3d button">
   <wtd-code-snippet source="buttons/square3d-button-example" [files]="['html']">
     <wtd-square3d-button-example/>
   </wtd-code-snippet>
+</wtd-presentation-container>
 
-</div>
-
-<div>
-  Among us button<br>
+<wtd-presentation-container title="Among us button">
   <wtd-code-snippet source="buttons/among-us-button-example" [files]="['html']">
     <wtd-among-us-button-example/>
   </wtd-code-snippet>
-
-</div>
+</wtd-presentation-container>

projects/doc/src/app/pages/loaders-page/loaders-page.component.html

@@ -1,46 +1,36 @@
+<wtd-presentation-container title="Double dots">
+  <wtd-code-snippet source="loaders/double-dots-loader-example" [files]="['html']">
+    <wtd-double-dots-loader-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>
+<wtd-presentation-container title="DVD">
 
-<div>
-  Loaders
-  <div>
-    Double dots
+  <wtd-code-snippet source="loaders/dvd-loader-example" [files]="['html']">
+    <wtd-dvd-loader-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>
 
-    <wtd-code-snippet source="loaders/double-dots-loader-example" [files]="['html']">
-      <wtd-double-dots-loader-example/>
-    </wtd-code-snippet>
-  </div>
-  <div>
-    DVD
+<wtd-presentation-container title="Camp">
+  <wtd-code-snippet source="loaders/camp-loader-example" [files]="['html']">
+    <wtd-camp-loader-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>
 
-    <wtd-code-snippet source="loaders/dvd-loader-example" [files]="['html']">
-      <wtd-dvd-loader-example/>
-    </wtd-code-snippet>
-  </div>
-  <div>
-    Camp
 
-    <wtd-code-snippet source="loaders/camp-loader-example" [files]="['html']">
-      <wtd-camp-loader-example/>
-    </wtd-code-snippet>
-  </div>
-  <div>
-    Hourglass
+<wtd-presentation-container title="Hourglass">
+  <wtd-code-snippet source="loaders/hourglass-loader-example" [files]="['html']">
+    <wtd-hourglass-loader-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>
+<wtd-presentation-container title="Fire">
+  <wtd-code-snippet source="loaders/fire-loader-example" [files]="['html']">
+    <wtd-fire-loader-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>
 
-    <wtd-code-snippet source="loaders/hourglass-loader-example" [files]="['html']">
-      <wtd-hourglass-loader-example/>
-    </wtd-code-snippet>
-  </div>
-  <div>
-    Fire
+<wtd-presentation-container title="Rotating cube">
 
-    <wtd-code-snippet source="loaders/fire-loader-example" [files]="['html']">
-      <wtd-fire-loader-example/>
-    </wtd-code-snippet>
-  </div>
-  <div>
-    Rotating cube
-
-    <wtd-code-snippet source="loaders/rotating-cube-loader-example" [files]="['html']">
-      <wtd-rotating-cube-loader-example/>
-    </wtd-code-snippet>
-  </div>
-</div>
+  <wtd-code-snippet source="loaders/rotating-cube-loader-example" [files]="['html']">
+    <wtd-rotating-cube-loader-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>

projects/doc/src/app/pages/switches-page/switches-page.component.html

@@ -1,11 +1,5 @@
-
-<div>
-  Switches
-  <div>
-    Rocker switch
-
-    <wtd-code-snippet source="buttons/square3d-button-example" [files]="['html','ts']">
-      <wtd-rocker-switch-example/>
-    </wtd-code-snippet>
-  </div>
-</div>
+<wtd-presentation-container title="Rocker switch">
+  <wtd-code-snippet source="buttons/square3d-button-example" [files]="['html','ts']">
+    <wtd-rocker-switch-example/>
+  </wtd-code-snippet>
+</wtd-presentation-container>

projects/doc/src/app/shared-doc/container/presentation-container/presentation-container.component.html

@@ -0,0 +1,3 @@
+<h2>{{title}}</h2>
+
+<ng-content></ng-content>

projects/doc/src/app/shared-doc/container/presentation-container/presentation-container.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PresentationContainerComponent } from './presentation-container.component';
+
+describe('PresentationContainerComponent', () => {
+  let component: PresentationContainerComponent;
+  let fixture: ComponentFixture<PresentationContainerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PresentationContainerComponent]
+    });
+    fixture = TestBed.createComponent(PresentationContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/doc/src/app/shared-doc/container/presentation-container/presentation-container.component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'wtd-presentation-container',
+  templateUrl: './presentation-container.component.html',
+  styleUrls: ['./presentation-container.component.scss']
+})
+export class PresentationContainerComponent {
+  @Input() title!: string;
+}

projects/doc/src/app/shared-doc/shared-doc.module.ts

@@ -5,6 +5,7 @@ import {HttpClientModule} from "@angular/common/http";
 import {SidebarComponent} from './menu/sidebar/sidebar.component';
 import { PageContainerComponent } from './container/page-container/page-container.component';
 import {RouterLink} from "@angular/router";
+import { PresentationContainerComponent } from './container/presentation-container/presentation-container.component';
 
 
 @NgModule({
@@ -13,12 +14,14 @@ import {RouterLink} from "@angular/router";
 
     CodeSnippetComponent,
     SidebarComponent,
-    PageContainerComponent
+    PageContainerComponent,
+    PresentationContainerComponent
   ],
   exports: [
     CodeSnippetComponent,
     SidebarComponent,
-    PageContainerComponent
+    PageContainerComponent,
+    PresentationContainerComponent
   ],
   imports: [
     CommonModule,