feat: implement GenrePage component to display movies by genre, including recent, upcoming, and top-rated films; enhance metadata generation for SEO

src/components/molecules/HeroMovie/index.tsx

@@ -139,7 +139,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                       <div className="flex items-center gap-2 text-gray-300">
                         <FaCalendar className="text-purple-400" />
                         <span>
-                          {new Date(movieDetails.release_date).getFullYear()}
+                          {formatter.formatDate(movieDetails.release_date)}
                         </span>
                       </div>
                     )}

src/components/molecules/MovieList/index.tsx

@@ -98,11 +98,10 @@ export const MovieList: FC<Props> = ({
     return 0;
   });
 
-  sortedMovies = sortedMovies.slice(0, loaded);
-
   if (sortDirection === "desc") {
     sortedMovies = sortedMovies.reverse();
   }
+  sortedMovies = sortedMovies.slice(0, loaded);
 
   const handleFilter = (key?: keyof typeof filter) => {
     setFilter({

src/components/molecules/TrackedMovies/index.tsx

@@ -1,12 +1,26 @@
 "use client";
 import { FC } from "react";
 import { useGlobalStore } from "@/app/store/globalStore";
-import Link from "next/link";
-import { FaCalendar, FaClock, FaStar } from "react-icons/fa";
+import { FaCalendar, FaClock } from "react-icons/fa";
 import { MovieRow } from "@/components/atoms/MovieRow";
+import { Movie } from "@/types/global";
 
-export const TrackedMovies: FC = () => {
-  const { movies } = useGlobalStore();
+type Props = {
+  overrideMovies?: Movie[];
+  daysLimit?: number;
+  labelCurrent?: string;
+  labelUpcoming?: string;
+};
+
+export const TrackedMovies: FC<Props> = ({
+  overrideMovies,
+  daysLimit = 30,
+  labelCurrent = "Aktualnie w kinach",
+  labelUpcoming = "Nadchodzące premiery",
+}) => {
+  const { movies: storeMovies } = useGlobalStore();
+
+  const movies = overrideMovies || storeMovies;
 
   if (movies.length === 0) {
     return null;
@@ -24,7 +38,7 @@ export const TrackedMovies: FC = () => {
 
     return (
       new Date(movie.release_date) <= today &&
-      daysSinceRelease <= 30 &&
+      daysSinceRelease <= daysLimit &&
       !movie.seen
     );
   });
@@ -48,7 +62,7 @@ export const TrackedMovies: FC = () => {
             <div>
               <h3 className="text-green-400 font-medium text-sm mb-3 flex items-center gap-2">
                 <FaClock className="w-4 h-4" />
-                Aktualnie w kinach ({sortedInCinema.length})
+                {labelCurrent} ({sortedInCinema.length})
               </h3>
               <div className="space-y-2">
                 {sortedInCinema.map((movie) => (
@@ -62,7 +76,7 @@ export const TrackedMovies: FC = () => {
             <div>
               <h3 className="text-blue-400 font-medium text-sm mb-3 flex items-center gap-2">
                 <FaCalendar className="w-4 h-4" />
-                Nadchodzące premiery ({sortedUpcoming.length})
+                {labelUpcoming} ({sortedUpcoming.length})
               </h3>
               <div className="space-y-2">
                 {sortedUpcoming.map((movie) => (