feat: docs app

docs/app/blocks/components/components-overview-block/components-overview-block.component.html

@@ -0,0 +1,20 @@
+<nb-card class="header-card">
+  <nb-card-header>Components Overview</nb-card-header>
+</nb-card>
+
+<div class="components-list">
+  <ng-container *ngFor="let component of components">
+    <h2 *ngIf="component.group">{{ component.name }}</h2>
+    <div *ngIf="!component.group" class="component-card-wrapper">
+      <a class="component-navigate-link" [routerLink]="component.link">
+        <nb-card [attr.title]="component.name">
+          <nb-card-body>
+            <img class="component-icon" src="assets/images/components/{{ component.icon }}"
+                 [attr.alt]="component.name">
+            <label class="component-name">{{ component.name }}</label>
+          </nb-card-body>
+        </nb-card>
+      </a>
+    </div>
+  </ng-container>
+</div>

docs/app/blocks/components/components-overview-block/components-overview-block.component.scss

@@ -0,0 +1,81 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+
+  .components-list {
+    display: flex;
+    flex-wrap: wrap;
+
+    h2 {
+      flex: 1 1 100%;
+      color: nb-theme(color-fg-heading-light);
+      margin: 1rem 0 2rem;
+      text-align: center;
+    }
+
+    .component-card-wrapper {
+      width: 100%;
+    }
+
+    .component-icon {
+      margin-bottom: 1rem;
+    }
+
+    .component-name {
+      color: nb-theme(color-fg-heading-light);
+      font-weight: nb-theme(font-weight-bolder);
+    }
+
+    .component-navigate-link {
+      text-decoration: none;
+    }
+
+
+    nb-card {
+      box-shadow: 0 4px 27px 0 rgba(230, 234, 240, 0.2);
+      transition: transform 0.25s ease;
+
+      > nb-card-body {
+        height: 12.5rem;
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &:hover {
+        box-shadow: 0 15px 37px 0 #dbe2eb;
+        transform: translateY(-1rem);
+        .component-name {
+          color: nb-theme(color-fg);
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-up(is) {
+    .components-list {
+
+      .component-card-wrapper {
+        flex: 1 0 auto;
+        width: 50%;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .components-list {
+
+      .component-card-wrapper {
+        flex: 1 0 auto;
+        max-width: 33.3%;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
+    }
+  }
+}

docs/app/blocks/components/components-overview-block/components-overview-block.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+
+import { NgxMenuService } from '../../../@theme/services/menu.service';
+
+@Component({
+  selector: 'ngx-components-overview-block',
+  styleUrls: ['./components-overview-block.component.scss'],
+  templateUrl: './components-overview-block.component.html',
+})
+export class NgxComponentsOverviewBlockComponent implements OnInit {
+  components: { name: string; icon: string; link: string }[];
+
+  constructor(private menu: NgxMenuService) {}
+
+  ngOnInit() {
+    this.components = this.menu
+      .getPreparedMenu('/docs')
+      .find(({ title }) => title === 'Components')
+      .children
+      .slice(1)
+      .map(({ data: { name, icon, type }, link }) => ({ name, icon, link, group: type === 'group' }));
+  }
+}