recuperando informacion y tratandola

2026-06-11 16:38:36 +02:00
parent cabd4803a4
commit de9d998650
7 changed files with 346 additions and 100 deletions
@@ -3,20 +3,37 @@ import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/tmdb";

-export function MovieHeader({ movie }: { movie: TmdbMovieDetails }) {
+export function MovieHeader({
+  movie,
+  onClear,
+}: {
+  movie: TmdbMovieDetails;
+  onClear?: () => void;
+}) {
  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>
+      {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>
+      ) : (
+        <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">
@@ -3,21 +3,21 @@
 import { Search } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
-import { getPosterUrl } from "@/lib/tmdb";
+import { getPosterUrl, type TmdbSearchResult } from "@/lib/tmdb";
 import { cn } from "@/lib/utils";

-interface SearchResult {
-  id: number;
-  title: string;
-  release_date: string;
-  poster_path: string | null;
-  overview: string;
-}
-
-export function SearchBar({ autoFocus = false }: { autoFocus?: boolean }) {
+export function SearchBar({
+  autoFocus = false,
+  onSelect,
+  compact = false,
+}: {
+  autoFocus?: boolean;
+  onSelect?: (movie: TmdbSearchResult) => void;
+  compact?: boolean;
+}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [query, setQuery] = useState("");
-  const [results, setResults] = useState<SearchResult[]>([]);
+  const [results, setResults] = useState<TmdbSearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);

@@ -34,7 +34,7 @@ export function SearchBar({ autoFocus = false }: { autoFocus?: boolean }) {
          `/api/search?q=${encodeURIComponent(query)}`,
          { signal: controller.signal },
        );
-        const data = (await response.json()) as { results: SearchResult[] };
+        const data = (await response.json()) as { results: TmdbSearchResult[] };
        setResults(data.results ?? []);
        setOpen(true);
      } catch (error) {
@@ -69,10 +69,15 @@ export function SearchBar({ autoFocus = false }: { autoFocus?: boolean }) {
  return (
    <div
      ref={containerRef}
-      className={cn("relative w-full max-w-2xl", open && "z-50")}
+      className={cn("relative w-full", open && "z-50", !compact && "max-w-2xl")}
    >
      <div className="relative">
-        <Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-amber-200/50" />
+        <Search
+          className={cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 text-amber-200/50",
+            compact ? "left-3 h-4 w-4" : "left-4 h-5 w-5",
+          )}
+        />
        <input
          autoFocus={autoFocus}
          type="search"
@@ -96,7 +101,12 @@ export function SearchBar({ autoFocus = false }: { autoFocus?: boolean }) {
          }}
          onFocus={() => query.trim() && setOpen(true)}
          placeholder="Search for a movie..."
-          className="w-full rounded-2xl border border-white/10 bg-white/5 py-4 pl-12 pr-4 text-base text-white outline-none transition focus:border-amber-400/40 focus:bg-white/[0.07] focus:ring-2 focus:ring-amber-400/20"
+          className={cn(
+            "w-full border border-white/10 bg-white/5 text-white outline-none transition focus:border-amber-400/40 focus:bg-white/[0.07] focus:ring-2 focus:ring-amber-400/20",
+            compact
+              ? "rounded-xl py-2 pl-9 pr-3 text-sm"
+              : "rounded-2xl py-4 pl-12 pr-4 text-base",
+          )}
        />
      </div>

@@ -116,41 +126,61 @@ export function SearchBar({ autoFocus = false }: { autoFocus?: boolean }) {
              const poster = getPosterUrl(result.poster_path, "w185");
              const year = result.release_date?.slice(0, 4);

+              const inner = (
+                <>
+                  <div className="relative h-14 w-10 shrink-0 overflow-hidden rounded-md bg-slate-800">
+                    {poster ? (
+                      <img
+                        src={poster}
+                        alt=""
+                        className="absolute inset-0 h-full w-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-full items-center justify-center text-[10px] text-slate-500">
+                        N/A
+                      </div>
+                    )}
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate font-medium text-white">
+                      {result.title}
+                      {year ? (
+                        <span className="ml-2 font-normal text-slate-400">
+                          ({year})
+                        </span>
+                      ) : null}
+                    </p>
+                    <p className="line-clamp-1 text-sm text-slate-400">
+                      {result.overview || "No overview available"}
+                    </p>
+                  </div>
+                </>
+              );
+
              return (
                <li key={result.id} role="option" aria-selected={false}>
-                  <Link
-                    href={`/movie/${result.id}`}
-                    prefetch
-                    onClick={() => setOpen(false)}
-                    className="flex items-center gap-3 border-b border-white/5 px-4 py-3 transition hover:bg-white/5 last:border-b-0"
-                  >
-                    <div className="relative h-14 w-10 shrink-0 overflow-hidden rounded-md bg-slate-800">
-                      {poster ? (
-                        <img
-                          src={poster}
-                          alt=""
-                          className="absolute inset-0 h-full w-full object-cover"
-                        />
-                      ) : (
-                        <div className="flex h-full items-center justify-center text-[10px] text-slate-500">
-                          N/A
-                        </div>
-                      )}
-                    </div>
-                    <div className="min-w-0">
-                      <p className="truncate font-medium text-white">
-                        {result.title}
-                        {year ? (
-                          <span className="ml-2 font-normal text-slate-400">
-                            ({year})
-                          </span>
-                        ) : null}
-                      </p>
-                      <p className="line-clamp-1 text-sm text-slate-400">
-                        {result.overview || "No overview available"}
-                      </p>
-                    </div>
-                  </Link>
+                  {onSelect ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onSelect(result);
+                        setOpen(false);
+                        setQuery("");
+                      }}
+                      className="flex w-full items-center gap-3 border-b border-white/5 px-4 py-3 text-left transition hover:bg-white/5 last:border-b-0"
+                    >
+                      {inner}
+                    </button>
+                  ) : (
+                    <Link
+                      href={`/movie/${result.id}`}
+                      prefetch
+                      onClick={() => setOpen(false)}
+                      className="flex items-center gap-3 border-b border-white/5 px-4 py-3 transition hover:bg-white/5 last:border-b-0"
+                    >
+                      {inner}
+                    </Link>
+                  )}
                </li>
              );
            })}