Make movie category dynamic

Refactored MovieCategoryComponent to accept a 'category' input and display it dynamically. Updated usage in MoviePosterComponent to pass the category value, improving flexibility and reusability.

src/app/movie-category/movie-category.component.html

@@ -1 +1,3 @@
-<span class="flex rounded-sm text-black text-sm px-2 py-1.5">Aktion</span>
+<span class="flex rounded-sm text-black text-sm px-2 py-1.5">
+  {{ getCategoryText() }}
+</span>

src/app/movie-category/movie-category.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-movie-category',
@@ -7,5 +7,9 @@ import { Component } from '@angular/core';
   styleUrl: './movie-category.component.css'
 })
 export class MovieCategoryComponent {
+  @Input() category: string = '-';
 
+  getCategoryText(): string {
+    return this.category;
+  }
 }

src/app/movie-poster/movie-poster.component.html

@@ -4,5 +4,5 @@
 <div class="flex gap-1 justify-between">
   <app-movie-rating [rating]="12"></app-movie-rating>
   <app-movie-duration [duration]="181"></app-movie-duration>
-  <app-movie-category></app-movie-category>
+  <app-movie-category [category]="'Action'"></app-movie-category>
 </div>