auto-commit for df4b0748-985b-4592-8c48-1e56102f3613

2026-07-30 14:32:40 -05:00 · 2026-04-29 14:49:07 +00:00
parent 7673090279
commit 356aa13063
30 changed files with 2809 additions and 244 deletions
@@ -0,0 +1,42 @@
+import { Play } from "lucide-react";
+
+export const MovieCard = ({ movie, onClick, progress }) => {
+  const pct = progress?.duration_seconds
+    ? Math.min(100, (progress.position_seconds / progress.duration_seconds) * 100)
+    : 0;
+  return (
+    <button
+      onClick={() => onClick?.(movie)}
+      className="group relative shrink-0 w-[180px] md:w-[220px] aspect-[2/3] overflow-hidden bg-[#0F0F0F] transition-all duration-300 hover:scale-105 hover:z-10 focus:outline-none focus:ring-2 focus:ring-[#D9381E]"
+      data-testid={`movie-card-${movie.id}`}
+    >
+      <img
+        src={movie.poster_url || movie.backdrop_url}
+        alt={movie.title}
+        loading="lazy"
+        className="w-full h-full object-cover"
+        onError={(e) => { e.currentTarget.style.opacity = 0.3; }}
+      />
+      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent opacity-90 md:opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+      <div className="absolute inset-x-0 bottom-0 p-4 translate-y-2 md:translate-y-0 md:opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
+        <h3 className="font-display text-lg font-bold tracking-tight text-white leading-none line-clamp-2">
+          {movie.title}
+        </h3>
+        <div className="mt-2 flex items-center gap-2 text-[10px] uppercase tracking-[0.2em] text-[#C8C8C8]">
+          <span>{movie.year}</span>
+          {movie.rating ? <span>· {movie.rating}</span> : null}
+        </div>
+      </div>
+      <div className="absolute top-3 right-3 w-9 h-9 bg-[#D9381E] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        <Play size={14} fill="white" strokeWidth={0} />
+      </div>
+      {pct > 0 && (
+        <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-white/10">
+          <div className="h-full bg-[#D9381E]" style={{ width: `${pct}%` }} />
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default MovieCard;