feat: docs app

docs/app/@theme/components/page-tabs/page-tabs.component.scss

@@ -0,0 +1,101 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  display: flex;
+  flex-wrap: wrap;
+
+  $tabs-fg: nb-theme(color-fg-heading-light);
+  $tabs-fg-active: nb-theme(color-fg-heading);
+  $tabs-bg-active: nb-theme(color-white);
+  $tabs-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6);
+  $tabs-accent-line: nb-theme(color-fg-highlight);
+
+  a {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 1rem;
+    width: 50%;
+    height: 7.5rem;
+    font-size: 0.875rem;
+    text-decoration: none;
+    color: $tabs-fg;
+    margin-bottom: 1rem;
+
+    .title {
+      padding-bottom: 0.75rem;
+      font-weight: 500;
+    }
+
+    .icon {
+      font-size: 1.5rem;
+      padding-bottom: 1rem;
+    }
+
+    &.selected {
+      background: white;
+      color: $tabs-fg-active;
+      box-shadow: $tabs-shadow;
+
+      .line {
+        height: 0.1875rem;
+        width: 60%;
+        background: $tabs-accent-line;
+        border-radius: 1.5px;
+      }
+    }
+  }
+
+  .icon,
+  .title {
+    display: block;
+    text-align: center;
+  }
+}
+
+:host(.horizontal) {
+  a {
+    flex: 0 0 50%;
+    height: auto;
+    margin-bottom: 0;
+    padding: 0 1rem;
+
+    .title,
+    .icon {
+      display: inline;
+      padding-bottom: 0;
+      vertical-align: middle;
+    }
+
+    .icon {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .text-container {
+    padding-bottom: 1.3rem;
+  }
+
+  .line {
+    order: -1;
+    margin-bottom: 1.3rem;
+  }
+
+  @media screen and (min-width: 40em) {
+    flex: 1 1 0;
+
+    a {
+      flex: 1 1 0;
+
+      &.selected::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        border-left: 1rem solid transparent;
+        border-right: 1rem solid transparent;
+        border-top: 1rem solid #fff;
+      }
+    }
+  }
+}