92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import Hero from '../components/movie/Hero';
|
|
import MovieRow from '../components/movie/MovieRow';
|
|
import { HeroSkeleton } from '../components/ui/Skeleton';
|
|
import { useTrending, useLatest, useTopRated, useByGenre } from '../hooks/useMovies';
|
|
|
|
export default function Home() {
|
|
const { movies: trending, isLoading: trendingLoading } = useTrending();
|
|
const { movies: latest, isLoading: latestLoading } = useLatest();
|
|
const { movies: topRated, isLoading: topRatedLoading } = useTopRated();
|
|
const { movies: action, isLoading: actionLoading } = useByGenre('action');
|
|
const { movies: comedy, isLoading: comedyLoading } = useByGenre('comedy');
|
|
const { movies: horror, isLoading: horrorLoading } = useByGenre('horror');
|
|
const { movies: scifi, isLoading: scifiLoading } = useByGenre('sci-fi');
|
|
const { movies: drama, isLoading: dramaLoading } = useByGenre('drama');
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="min-h-screen bg-netflix-black"
|
|
>
|
|
{/* Hero Section */}
|
|
{trendingLoading ? (
|
|
<HeroSkeleton />
|
|
) : (
|
|
<Hero movies={trending.slice(0, 5)} />
|
|
)}
|
|
|
|
{/* Movie Rows */}
|
|
<div className="-mt-32 relative z-10">
|
|
<MovieRow
|
|
title="Trending Now"
|
|
movies={trending}
|
|
isLoading={trendingLoading}
|
|
linkTo="/browse?sort=download_count"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Latest Releases"
|
|
movies={latest}
|
|
isLoading={latestLoading}
|
|
linkTo="/browse?sort=date_added"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Top Rated"
|
|
movies={topRated}
|
|
isLoading={topRatedLoading}
|
|
linkTo="/browse?sort=rating&min_rating=8"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Action Movies"
|
|
movies={action}
|
|
isLoading={actionLoading}
|
|
linkTo="/browse/action"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Comedy"
|
|
movies={comedy}
|
|
isLoading={comedyLoading}
|
|
linkTo="/browse/comedy"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Horror"
|
|
movies={horror}
|
|
isLoading={horrorLoading}
|
|
linkTo="/browse/horror"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Sci-Fi"
|
|
movies={scifi}
|
|
isLoading={scifiLoading}
|
|
linkTo="/browse/sci-fi"
|
|
/>
|
|
|
|
<MovieRow
|
|
title="Drama"
|
|
movies={drama}
|
|
isLoading={dramaLoading}
|
|
linkTo="/browse/drama"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|