[frontend] Add hoodspage design

kibicara-frontend/src/app/hoodspage/hoodspage.component.html

@@ -1 +1,36 @@
-<div *ngFor="let item of hoods$ | async">{{ item.name }}</div>
+<div class="banner">
+  <h1>Discover hoods</h1>
+</div>
+<div class="page">
+  <mat-form-field class="searchbar">
+    <mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>
+    <input matInput type="search" [(ngModel)]="searchText" autocomplete="off" />
+  </mat-form-field>
+  <mat-selection-list
+    [multiple]="false"
+    *ngIf="hoods$ | async; let hoods; else: noHoods"
+    class="list"
+  >
+    <a
+      [routerLink]="['/register']"
+      *ngIf="(hoods | filter: searchText).length === 0"
+    >
+      <mat-list-option>
+        <p>No matching hood found. Start by creating <u>a new hood!</u></p>
+      </mat-list-option>
+    </a>
+    <a
+      *ngFor="let hood of hoods | filter: searchText"
+      [routerLink]="['/hoods', hood.id]"
+    >
+      <mat-list-option>
+        {{ hood.name }}
+        <mat-divider></mat-divider>
+      </mat-list-option>
+    </a>
+  </mat-selection-list>
+  <ng-template #noHoods>
+    No hoods available yet. Create
+    <a [routerLink]="['/dashboard']">a new hood! </a>
+  </ng-template>
+</div>

kibicara-frontend/src/app/hoodspage/hoodspage.component.scss

@@ -0,0 +1,43 @@
+a {
+  text-decoration: none;
+}
+
+.searchbar {
+  margin-top: 30px;
+  width: 100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 10px;
+  border: 1px solid #949494;
+  border-radius: 24px;
+  box-sizing: border-box;
+  z-index: 10;
+}
+
+.page {
+  padding-left: 10%;
+  padding-right: 10%;
+}
+
+.list {
+  border: 1px solid #d7d7d7;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+h1 {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 3.4rem;
+  color: white;
+  box-sizing: border-box;
+  font-weight: bold;
+}
+
+.banner {
+  padding-top: 15%;
+  background: url("../../assets/hoods2.jpg");
+  background-size: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}

kibicara-frontend/src/app/hoodspage/hoodspage.component.ts

@@ -7,9 +7,12 @@ import { HoodsService } from '../core/api/api/hoods.service';
   styleUrls: ['./hoodspage.component.scss'],
 })
 export class HoodspageComponent implements OnInit {
-  hoods$ = this.hoodsService.getHoods();
+  hoods$;
+  searchText: string;
 
   constructor(private readonly hoodsService: HoodsService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.hoods$ = this.hoodsService.getHoods();
+  }
 }

kibicara-frontend/src/app/shared/shared.module.ts

@@ -3,18 +3,28 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 import { MaterialModule } from './material/material.module';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MarkdownModule } from 'ngx-markdown';
-import { HttpClient } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { Ng2SearchPipeModule } from 'ng2-search-filter';
 
 @NgModule({
   declarations: [ToolbarComponent, NotFoundComponent],
-  imports: [MaterialModule, ReactiveFormsModule, FormsModule],
+  imports: [
+    MaterialModule,
+    ReactiveFormsModule,
+    FormsModule,
+    RouterModule,
+    CommonModule,
+    Ng2SearchPipeModule,
+  ],
   exports: [
     ToolbarComponent,
     NotFoundComponent,
     MaterialModule,
     ReactiveFormsModule,
     FormsModule,
+    CommonModule,
+    Ng2SearchPipeModule,
   ],
 })
 export class SharedModule {}