style: add toogle slide btn

adamswonder · May 6, 2024 · 90b3ded · 90b3ded
1 parent 1755ac1
commit 90b3ded
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/apps/conv-learning-manager/src/assets/i18n/en.json b/apps/conv-learning-manager/src/assets/i18n/en.json
@@ -880,6 +880,14 @@
       }
     }
   },
+  "AI-FALLBACK": {
+    "MAIN-TITLE":"AI Routing & Fallbacks",
+    "MAIN-DESC": "Sometimes, your users might get stuck or ask something you didn’t foresee. Through this feature you can use the power of AI to control where to route them for optima learner satisfaction!",
+    "TITLE-SECTION": {
+      "SLIDE-BTN": "On",
+      "TITLE": "Ai Routing"
+    }
+  },
 
   "TOAST": {
     "EDIT-BOT": {

diff --git a/libs/features/convs-mgr/fallbacks/src/lib/fallbacks.module.ts b/libs/features/convs-mgr/fallbacks/src/lib/fallbacks.module.ts
@@ -3,13 +3,26 @@ import { CommonModule } from '@angular/common';
 
 import { ConvlPageModule } from '@app/elements/layout/page-convl';
 
+import {
+  MaterialBricksModule,
+  MaterialDesignModule,
+} from '@iote/bricks-angular';
+import { MultiLangModule } from '@ngfi/multi-lang';
+
 import { FallbackMainPageComponent } from './pages/fallback-main-page/fallback-main-page.component';
 
 import { FallbackRouterModule } from './fallbacks.router';
 import { FallbackModalComponent } from './modals/fallback-modal/fallback-modal.component';
 
 @NgModule({
-  imports: [CommonModule, ConvlPageModule, FallbackRouterModule],
+  imports: [
+    CommonModule,
+    ConvlPageModule,
+    FallbackRouterModule,
+    MaterialBricksModule,
+    MaterialDesignModule,
+    MultiLangModule,
+  ],
   declarations: [FallbackMainPageComponent, FallbackModalComponent],
 })
 export class FallbacksModule {}
diff --git a/...es/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.html b/...es/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.html
@@ -1,10 +1,14 @@
 <convl-page>
   <section class="page-container">
-    <span class="title">AI Routing & Fallbacks</span>
+    <span class="title">{{'AI-FALLBACK.MAIN-TITLE'| transloco }}</span>
 
-    <div>
-      Sometimes, your users might get stuck or ask something you didn’t foresee. Through this feature you can use the
-      power of AI to control where to route them for optima learner satisfaction!
+    <div class="desc">
+      {{'AI-FALLBACK.MAIN-DESC'| transloco }}
+    </div>
+
+    <div class="btns-section">
+      <mat-slide-toggle>{{'AI-FALLBACK.TITLE-SECTION.SLIDE-BTN'| transloco }}</mat-slide-toggle>
+      <span>{{'AI-FALLBACK.TITLE-SECTION.TITLE'| transloco }}</span>
     </div>
 
     <button class="btn" (click)="openModal()">OpenModal</button>

diff --git a/...es/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.scss b/...es/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.scss
@@ -13,6 +13,13 @@
   font-weight: 400;
 }
 
+.btns-section {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2rem;
+}
+
 .btn {
   max-width: 100px;
   max-height: 30px;