show the films in categories & last added, mark the selected one

frontend/src/app/components/home/browse/browse.component.html

@@ -3,6 +3,7 @@
   <app-hero-banner [currentMovie]="currentMovie"></app-hero-banner>
   <app-categories
     [movies]="movies"
+    [currentMovie]="currentMovie[0].id"
     (currentMovieId)="currentMovieId($event)"
   ></app-categories>
 </section>

frontend/src/app/components/home/browse/browse.component.ts

@@ -17,20 +17,23 @@ export class BrowseComponent implements OnInit {
       title: 'Our Galaxy',
       description:
         'Experience the fascinating journey through the infinite expanse of our galaxy. "Our Galaxy" offers a detailed insight into the breathtaking structures, stars and planets of our cosmic home. Through stunning visual effects and comprehensive explanations, this documentary guides viewers through the mysteries of the universe and reveals the beauty and complexity of outer space. Perfect for astronomy lovers and the curious who want to learn more about the wonders of the universe',
-      category: 'documentation',
+      category: 'Documentary',
       imgPath: 'galaxy.png',
       videoPath: 'galaxy.mp4',
+      create: '08.03.2024',
     },
     {
       id: 2,
       title: 'Star Trek',
       description:
         'Join Captain Kirk and the crew of the starship USS Enterprise as they embark on thrilling adventures across the universe. "Star Trek" is a legendary sci-fi saga that explores the final frontier, filled with action, exploration, and unforgettable encounters with alien species. This epic journey showcases the spirit of discovery and the unwavering courage of the Starfleet members as they confront the unknown and protect the galaxy from various threats.',
-      category: 'sci-fi',
+      category: 'Science Fiction',
       imgPath: 'star-trek.png',
       videoPath: 'star-trek.mp4',
+      create: '08.02.2024',
     },
   ];
+
   currentMovie: any[] = [];
 
   ngOnInit(): void {

frontend/src/app/components/home/browse/categories/categories.component.html

@@ -1,10 +1,12 @@
 <section class="hide-scrollbar">
+  <!-- Column for films of the last 7 days -->
   <div class="category">
-    <p>New Releases</p>
+    <p>Added in the last 7 days</p>
     <div class="movies">
-      @for (movie of movies; track movie) {
+      @for (movie of recentMovies(); track movie) {
       <div class="movie" (click)="openCurrentMovie(movie.id)">
         <img
+          [ngClass]="{ selected: movie.id === currentMovie }"
           src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
           alt=""
         />
@@ -12,19 +14,23 @@
       }
     </div>
   </div>
+  <!-- Genre columns -->
+  @for (filmGenre of filmGenres; track filmGenre) {
+  <!-- Movie available in genre -->
+  @if (allMovies(filmGenre).length > 0) {
   <div class="category">
-    <p>Continue Watching</p>
+    <p>{{ filmGenre }}</p>
-  </div>
+    <div class="movies">
-  <div class="category">
+      @for (movie of allMovies(filmGenre); track movie) {
-    <p>Action & Adventure</p>
+      <div class="movie" (click)="openCurrentMovie(movie.id)">
-  </div>
+        <img
-  <div class="category">
+          [ngClass]="{ selected: movie.id === currentMovie }"
-    <p>Science Fiction & Fantasy</p>
+          src="./../../../../../assets/movies/banner/{{ movie.imgPath }}"
-  </div>
+          alt=""
-  <div class="category">
+        />
-    <p>Drama & Romance</p>
+      </div>
-  </div>
+      }
-  <div class="category">
+    </div>
-    <p>All Other Categories</p>
   </div>
+  } }
 </section>

frontend/src/app/components/home/browse/categories/categories.component.scss

@@ -3,6 +3,7 @@
 section {
   height: 60%;
   padding: 0 48px;
+  margin-top: 12px;
 }
 
 .category {
@@ -34,6 +35,10 @@ section {
   }
 }
 
+.selected {
+  border: 2px solid $blue !important;
+}
+
 // Hide scrollbar
 
 .hide-scrollbar {

frontend/src/app/components/home/browse/categories/categories.component.ts

@@ -1,21 +1,54 @@
+import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-categories',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss',
 })
 export class CategoriesComponent {
   @Input() movies: any[] = [];
+  @Input() currentMovie: number = 0;
   @Output() currentMovieId = new EventEmitter<number>();
 
+  filmGenres = [
+    'Action',
+    'Adventure',
+    'Comedy',
+    'Drama',
+    'Horror',
+    'Science Fiction',
+    'Fantasy',
+    'Romance',
+    'Thriller',
+    'Mystery',
+    'Crime',
+    'Animation',
+    'Documentary',
+    'Musical',
+    'War',
+    'Western',
+  ];
+
   openCurrentMovie(movieId: number) {
+    this.currentMovie = movieId;
     this.currentMovieId.emit(movieId);
   }
 
-  get documentaryMovies() {
+  allMovies(filmGenre: string) {
-    return this.movies.filter((movie) => movie.category === 'documentary');
+    return this.movies.filter((movie) => movie.category === filmGenre);
+  }
+
+  recentMovies() {
+    const today = new Date();
+    const sevenDaysAgo = new Date(today);
+    sevenDaysAgo.setDate(today.getDate() - 7);
+
+    return this.movies.filter((movie) => {
+      const movieDate = new Date(movie.create);
+      return movieDate >= sevenDaysAgo;
+    });
   }
 }