juan/lensflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

relevo de glm

Browse Source
This commit is contained in:
juan
2026-06-17 20:35:57 +02:00
parent 6620b493f5
commit cdf2893b94
20 changed files with 251 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MovieHeader.tsx
+11 -20
View File
@@ -5,10 +5,10 @@ import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/t
export function MovieHeader({
movie,
onClear,
showBack = true,
}: {
movie: TmdbMovieDetails;
onClear?: () => void;
showBack?: boolean;
}) {
const poster = getPosterUrl(movie.poster_path, "w500");
const year = movie.release_date?.slice(0, 4);
@@ -16,19 +16,10 @@ export function MovieHeader({
return (
<div className="space-y-6">
{onClear ? (
<button
type="button"
onClick={onClear}
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" />
Search another movie
</button>
) : (
{showBack && (
<Link
href="/"
className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
className="inline-flex w-fit items-center gap-2 text-sm text-stone-500 transition hover:text-amber-700"
>
<ArrowLeft className="h-4 w-4" />
Back to search
@@ -36,7 +27,7 @@ export function MovieHeader({
)}
<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">
<div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-stone-200 bg-stone-100 shadow-sm sm:mx-0">
{poster ? (
<Image
src={poster}
@@ -47,7 +38,7 @@ export function MovieHeader({
priority
/>
) : (
<div className="flex h-full items-center justify-center text-sm text-slate-500">
<div className="flex h-full items-center justify-center text-sm text-stone-500">
No poster
</div>
)}
@@ -55,10 +46,10 @@ export function MovieHeader({
<div className="space-y-3 text-center sm:text-left">
<div>
<h1 className="text-3xl font-semibold tracking-tight text-white md:text-4xl">
<h1 className="text-3xl font-semibold tracking-tight text-stone-950 md:text-4xl">
{movie.title}
</h1>
<p className="mt-1 text-slate-400">
<p className="mt-1 text-stone-600">
{[year, movie.runtime ? `${movie.runtime} min` : null]
.filter(Boolean)
.join(" · ")}
@@ -67,14 +58,14 @@ export function MovieHeader({
<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">
<span className="rounded-full border border-amber-300 bg-amber-100 px-3 py-1 text-sm font-medium text-amber-700">
{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"
className="rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-sm text-stone-700"
>
{genre.name}
</span>
@@ -82,7 +73,7 @@ export function MovieHeader({
</div>
{movie.overview ? (
<p className="max-w-3xl text-sm leading-relaxed text-slate-400 md:text-base">
<p className="max-w-3xl text-sm leading-relaxed text-stone-600 md:text-base">
{movie.overview}
</p>
) : null}