feat(docs): update dialogs docs (#202)

apps/ngx-popovers/src/app/pages/documentation/page-dialog/examples/1/index.component.html

@@ -0,0 +1,23 @@
+<ngx-dialog [(value)]="open">
+  <button class="btn btn-accent" ngx-dialog-trigger>Toggle</button>
+
+  <ng-template ngx-dialog-template>
+    <div class="modal-box">
+      <p class="text-2xl">Hello! I am Dialog</p>
+      <div class="divider"></div>
+      <p>
+        Lorem ipsum dolor sit amet,
+        consectetur adipisicing elit.
+      </p>
+
+      <div class="py-4"></div>
+
+      <button
+        class="btn btn-sm btn-error ml-auto"
+        ngx-dialog-close
+      >
+        Close
+      </button>
+    </div>
+  </ng-template>
+</ngx-dialog>

apps/ngx-popovers/src/app/pages/documentation/page-dialog/examples/1/index.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgxDialog } from '@ngx-popovers/dialog';
+
+@Component({
+  selector: 'demo-index',
+  standalone: true,
+  imports: [CommonModule, NgxDialog],
+  templateUrl: './index.component.html',
+  styleUrl: './index.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IndexComponent {
+  open = false;
+}

apps/ngx-popovers/src/app/pages/documentation/page-dialog/page-dialog.component.html

@@ -1,50 +1,30 @@
-<div class="page">
+<demo-doc-page>
   <page-title />
 
-  <section class="py-4">
-    <h2 class="text-4xl mb-4 font-bold">About</h2>
-
+  <demo-doc-section name="about">
+    <demo-sub-title>About</demo-sub-title>
     <p>Dialog is used to show a content when you click a button.</p>
 
-    <div class="my-4">
-      <highlight lang="bash" [code]="'npm i @ngx-popovers/dialog'" />
-    </div>
+    <highlight
+      class="block my-4"
+      lang="bash"
+      [code]="'npm i @ngx-popovers/dialog'"
+    />
 
-    <h2 class="text-2xl mb-4 font-bold">Default example</h2>
+  </demo-doc-section>
 
+  <demo-doc-section name="usage">
+    <demo-sub-title>Usage</demo-sub-title>
     <p>
       Below you can see the easiest way to add a dialog to your page.
       This dialog will be rendered as the last child of the body.
     </p>
 
-    <ngx-example class="py-10 my-4 max-w-[800px] items-center">
-      <ngx-dialog [(value)]="open" contentClass="first">
-        <button class="btn btn-accent" ngx-dialog-trigger>Toggle</button>
-
-        <ng-template ngx-dialog-template>
-          <div class="modal-box">
-            <p class="text-2xl">Hello! I am Dialog</p>
-            <div class="divider"></div>
-            <p>
-              Lorem ipsum dolor sit amet,
-              consectetur adipisicing elit.
-            </p>
-
-            <div class="py-4"></div>
-
-            <button
-              class="btn btn-sm btn-error ml-auto"
-              ngx-dialog-close
-            >
-              Close
-            </button>
-          </div>
-        </ng-template>
-      </ngx-dialog>
-    </ngx-example>
-
-    <div class="my-4">
-      <highlight lang="html" [code]="defaultExample" />
-    </div>
-  </section>
-</div>
+    <demo-code-example-tabs
+      [html]="example1.HTML | async"
+      [ts]="example1.TS | async"
+    >
+      <ng-container *ngComponentOutlet="example1.EXAMPLE | async" />
+    </demo-code-example-tabs>
+  </demo-doc-section>
+</demo-doc-page>

apps/ngx-popovers/src/app/pages/documentation/page-dialog/page-dialog.component.ts

@@ -4,6 +4,12 @@ import { TitleComponent } from '@demo/pages/documentation/ui/components/title/ti
 import { ExampleComponent } from '@demo/template/example';
 import { HighlightComponent } from '@demo/core/highlight';
 import { NgxDialog } from '@ngx-popovers/dialog';
+import {
+  CodeExampleTabsComponent,
+  DocPageComponent,
+  DocSectionComponent,
+  SubTitleComponent
+} from '@demo/pages/documentation/ui/components';
 
 const defaultExample = `
 <ngx-dialog>
@@ -44,14 +50,22 @@ const defaultExample = `
     TitleComponent,
     ExampleComponent,
     HighlightComponent,
-    NgxDialog
+    NgxDialog,
+    DocPageComponent,
+    DocSectionComponent,
+    SubTitleComponent,
+    CodeExampleTabsComponent
   ],
   templateUrl: './page-dialog.component.html',
   styleUrl: './page-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PageDialogComponent {
-  defaultExample = defaultExample;
-
   open = false;
+
+  example1 = {
+    EXAMPLE: import('./examples/1/index.component').then(c => c.IndexComponent),
+    HTML: import('./examples/1/index.component.html?raw').then(m => m.default),
+    TS: import('./examples/1/index.component.ts?raw').then(m => m.default)
+  };
 }