feat: add TrackedMovies component to display upcoming and currently showing films; introduce MovieRow for individual movie representation

src/components/atoms/MovieRow/index.tsx

@@ -0,0 +1,72 @@
+import { formatter } from "@/helpers/formater";
+import { Movie } from "@/types/global";
+import Link from "next/link";
+import { FC } from "react";
+import { FaCalendar, FaClock, FaStar } from "react-icons/fa";
+
+export const MovieRow: FC<{ movie: Movie; isUpcoming: boolean }> = ({
+  movie,
+  isUpcoming,
+}) => {
+  const daysSinceRelease = Math.abs(
+    Math.floor(
+      (new Date().getTime() - new Date(movie.release_date).getTime()) /
+        (1000 * 60 * 60 * 24)
+    )
+  );
+
+  return (
+    <Link
+      href={`/film/${movie.id}`}
+      className="flex items-center gap-4 p-3 rounded-lg bg-gray-800/30 hover:bg-gray-800/50 transition-colors group"
+    >
+      <div className="relative w-12 h-16 rounded overflow-hidden flex-shrink-0">
+        <img
+          src={`https://image.tmdb.org/t/p/w154${movie.poster_path}`}
+          alt={movie.title}
+          className="object-cover inset-0"
+          sizes="48px"
+        />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <h3 className="text-white font-medium text-sm truncate group-hover:text-blue-400 transition-colors">
+          {movie.title}
+        </h3>
+        <div className="flex items-center gap-3 mt-1">
+          <div className="flex items-center gap-1 text-gray-400 text-xs">
+            {isUpcoming ? (
+              <FaCalendar className="w-3 h-3" />
+            ) : (
+              <FaClock className="w-3 h-3" />
+            )}
+            <span>{formatter.formatDate(movie.release_date)}</span>
+          </div>
+
+          {!!movie.vote_average && (
+            <div className="flex items-center gap-1 text-yellow-400 text-xs">
+              <FaStar className="w-3 h-3 fill-current" />
+              <span>{movie.vote_average.toFixed(1)}</span>
+            </div>
+          )}
+
+          {movie.favorite && (
+            <div className="w-2 h-2 bg-red-500 rounded-full" title="Ulubione" />
+          )}
+        </div>
+      </div>
+
+      <div
+        className={`text-xs px-2 py-1 rounded-full font-medium ${
+          isUpcoming
+            ? "bg-blue-500/20 text-blue-400"
+            : "bg-green-500/20 text-green-400"
+        }`}
+      >
+        {isUpcoming
+          ? `za ${daysSinceRelease} dni`
+          : `od ${daysSinceRelease} dni`}
+      </div>
+    </Link>
+  );
+};