From b304185e212cfb2938110aa84492fe8d886721fc Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Wed, 29 Oct 2025 10:26:29 +0100
Subject: [PATCH] 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 | 4 +++-
 src/app/movie-category/movie-category.component.ts   | 6 +++++-
 src/app/movie-poster/movie-poster.component.html     | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/app/movie-category/movie-category.component.html b/src/app/movie-category/movie-category.component.html
index 98fd707..16df8eb 100644
--- a/src/app/movie-category/movie-category.component.html
+++ b/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>
diff --git a/src/app/movie-category/movie-category.component.ts b/src/app/movie-category/movie-category.component.ts
index 2aec72d..4b07e4a 100644
--- a/src/app/movie-category/movie-category.component.ts
+++ b/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;
+  }
 }
diff --git a/src/app/movie-poster/movie-poster.component.html b/src/app/movie-poster/movie-poster.component.html
index 8a63ee6..494579e 100644
--- a/src/app/movie-poster/movie-poster.component.html
+++ b/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>