first commit

2026-06-10 18:30:46 +02:00
parent 3e7b0ae2e0
commit cabd4803a4
39 changed files with 3635 additions and 81 deletions
@@ -0,0 +1,76 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/tmdb";
+
+export function MovieHeader({ movie }: { movie: TmdbMovieDetails }) {
+  const poster = getPosterUrl(movie.poster_path, "w500");
+  const year = movie.release_date?.slice(0, 4);
+  const certification = getUsCertification(movie);
+
+  return (
+    <div className="space-y-6">
+      <Link
+        href="/"
+        className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to search
+      </Link>
+
+      <div className="flex flex-col gap-6 sm:flex-row sm:items-end">
+        <div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-white/10 bg-slate-900 shadow-2xl sm:mx-0">
+          {poster ? (
+            <Image
+              src={poster}
+              alt={movie.title}
+              fill
+              className="object-cover"
+              sizes="144px"
+              priority
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-slate-500">
+              No poster
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-3 text-center sm:text-left">
+          <div>
+            <h1 className="text-3xl font-semibold tracking-tight text-white md:text-4xl">
+              {movie.title}
+            </h1>
+            <p className="mt-1 text-slate-400">
+              {[year, movie.runtime ? `${movie.runtime} min` : null]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-2 sm:justify-start">
+            {certification ? (
+              <span className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-sm font-medium text-amber-200">
+                {certification}
+              </span>
+            ) : null}
+            {movie.genres.map((genre) => (
+              <span
+                key={genre.id}
+                className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-sm text-slate-300"
+              >
+                {genre.name}
+              </span>
+            ))}
+          </div>
+
+          {movie.overview ? (
+            <p className="max-w-3xl text-sm leading-relaxed text-slate-400 md:text-base">
+              {movie.overview}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}