57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Subject } from '@/lib/api';
|
|
import MovieCard from './MovieCard';
|
|
import { useRef } from 'react';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
|
|
interface MovieRowProps {
|
|
title: string;
|
|
movies: Subject[];
|
|
headerContent?: React.ReactNode;
|
|
}
|
|
|
|
export default function MovieRow({ title, movies, headerContent }: MovieRowProps) {
|
|
const rowRef = useRef<HTMLDivElement>(null);
|
|
|
|
const slide = (offset: number) => {
|
|
if (rowRef.current) {
|
|
rowRef.current.scrollLeft += offset;
|
|
}
|
|
};
|
|
|
|
if (!movies || movies.length === 0) return null;
|
|
|
|
return (
|
|
<div className="px-4 md:px-12 my-8 space-y-4 group">
|
|
<div className="mb-2">
|
|
<h2 className="text-white text-xl md:text-2xl font-semibold hover:text-gray-300 cursor-pointer transition inline-block">
|
|
{title}
|
|
</h2>
|
|
{headerContent}
|
|
</div>
|
|
<div className="relative">
|
|
<button
|
|
className="absolute left-0 top-0 bottom-0 z-40 bg-black/50 hover:bg-black/70 w-12 hidden md:group-hover:flex items-center justify-center transition opacity-0 group-hover:opacity-100"
|
|
onClick={() => slide(-500)}
|
|
>
|
|
<ChevronLeft className="text-white w-8 h-8" />
|
|
</button>
|
|
|
|
<div ref={rowRef} className="flex items-center gap-4 overflow-x-scroll no-scrollbar scroll-smooth p-2">
|
|
{movies.map((movie) => (
|
|
<MovieCard key={movie.subjectId} movie={movie} />
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
className="absolute right-0 top-0 bottom-0 z-40 bg-black/50 hover:bg-black/70 w-12 hidden md:group-hover:flex items-center justify-center transition opacity-0 group-hover:opacity-100"
|
|
onClick={() => slide(500)}
|
|
>
|
|
<ChevronRight className="text-white w-8 h-8" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|