Add new components, styles, and services for user management and navigation

jambotron-ui/src/app/components/tutorials.component/tutorials.component.html

@@ -0,0 +1,9 @@
+@for (tutorial of tutorials; track $index){
+  <mat-card appearance="outlined" class="tutorial-card">
+    <mat-card-header>
+      <mat-card-title>{{tutorial.title}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content [innerHTML]="tutorial.description">
+    </mat-card-content>
+  </mat-card>
+}

jambotron-ui/src/app/components/tutorials.component/tutorials.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TutorialsComponent } from './tutorials.component';
+
+describe('TutorialsComponent', () => {
+  let component: TutorialsComponent;
+  let fixture: ComponentFixture<TutorialsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TutorialsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TutorialsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

jambotron-ui/src/app/components/tutorials.component/tutorials.component.ts

@@ -0,0 +1,39 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {Tutorial} from '../../models/tutorial.model';
+import {TutorialService} from '../../services/tutorial.service';
+import {MatCard, MatCardContent, MatCardHeader} from '@angular/material/card';
+
+@Component({
+  selector: 'app-tutorials.component',
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatCardHeader
+  ],
+  templateUrl: './tutorials.component.html',
+  styleUrl: './tutorials.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class TutorialsComponent {
+  tutorials?: Tutorial[];
+
+  constructor(private tutorialService: TutorialService) {
+    this.retrieveTutorials();
+  }
+
+  // ngOnInit(): void {
+  //   this.retrieveTutorials();
+  // }
+
+  retrieveTutorials(): void {
+    this.tutorialService.getAll()
+      .subscribe(
+        data => {
+          this.tutorials = data;
+          console.log(data);
+        },
+        error => {
+          console.log(error);
+        });
+  }
+}