feat: added tabs

Author: Anlanther

src/app/app.component.html

@@ -1,6 +1 @@
-<app-form-filter
-  [widgetInput]="filterState()"
-  (savedState)="updateSavedState($event)"
-></app-form-filter>
-
-<app-button></app-button>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,25 +1,10 @@
-import { Component, signal } from '@angular/core';
-import { ButtonComponent } from './button/button.component';
-import { FILTER_INPUT } from './dummy-data/fund-input-dummy';
-import { FormFilterModule } from './form-filter/form-filter.module';
-import { SavedFilter } from './form-filter/models/saved-filter.model';
-import { WidgetInput } from './models/widget-input.model';
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [FormFilterModule, ButtonComponent],
+  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {
-  filterState = signal<WidgetInput>(FILTER_INPUT);
-
-  updateSavedState(savedState: SavedFilter) {
-    this.filterState.update((state) => ({
-      ...state,
-      state: savedState,
-    }));
-
-    console.log('Saved state:', savedState);
-  }
-}
+export class AppComponent {}

src/app/app.routes.ts

@@ -1,3 +1,16 @@
 import { Routes } from '@angular/router';
+import { GridContainerComponent } from './components/grid-container/grid-container.component';
+import { MainComponent } from './views/main/main.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: MainComponent,
+    children: [
+      {
+        path: ':workspace',
+        component: GridContainerComponent,
+      },
+    ],
+  },
+];

src/app/button/button.component.html

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
   <input
     matInput
     [formControl]="inputForm"

src/app/button/button.component.scss

@@ -1,4 +1,4 @@
-<mat-form-field>
+<mat-form-field appearance="outline">
   <mat-label>Countries</mat-label>
   <mat-select [formControlName]="controlKey()" multiple>
     <mat-select-trigger>