Update MovieCard component to support "aurora" layout enhancements: add layout prop to MovieCard instances in the Odkrywaj page, and adjust AuroraLayout to conditionally render status indicators based on the simpleToggle prop. Refactor MovieList grid layout for improved responsiveness.
This commit is contained in:
Norbert Maciaszek
parent
1175543e32
commit
983a362b80
|
|
@ -45,7 +45,12 @@ export default async function Home() {
|
|||
<h2 className="text-3xl font-bold text-white mb-8">Teraz w kinach</h2>
|
||||
<Carousel>
|
||||
{nowPlayingMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle />
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
|
@ -56,7 +61,12 @@ export default async function Home() {
|
|||
</h2>
|
||||
<Carousel>
|
||||
{upcomingMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle />
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
|
@ -67,7 +77,12 @@ export default async function Home() {
|
|||
</h2>
|
||||
<Carousel>
|
||||
{popularMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle />
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
|
@ -76,7 +91,12 @@ export default async function Home() {
|
|||
<h2 className="text-3xl font-bold text-white mb-8">Trendy dnia</h2>
|
||||
<Carousel>
|
||||
{trendingMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle />
|
||||
<MovieCard
|
||||
key={movie.id}
|
||||
{...movie}
|
||||
simpleToggle
|
||||
layout="aurora"
|
||||
/>
|
||||
))}
|
||||
</Carousel>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
handleFavorite,
|
||||
daysSinceRelease,
|
||||
releaseDate,
|
||||
simpleToggle,
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
|
|
@ -78,7 +79,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
{!!vote_average && (
|
||||
<div className="absolute top-4 right-4 transform rotate-3 group-hover:rotate-0 transition-transform duration-300">
|
||||
<div
|
||||
className={`bg-gradient-to-r ${scoreColor} p-3 rounded-xl shadow-lg backdrop-blur-sm`}
|
||||
className={`bg-gradient-to-r ${scoreColor} p-2 rounded-xl shadow-lg backdrop-blur-sm`}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-white font-bold">
|
||||
<span className="text-xl">★</span>
|
||||
|
|
@ -100,39 +101,41 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
|
||||
{/* Days left to release */}
|
||||
{(!isReleased || daysSinceRelease < 35) && (
|
||||
<div className="absolute bottom-4 right-4 flex justify-center">
|
||||
<div className="text-white bg-black/60 backdrop-blur-sm px-3 py-2 rounded-xl border border-white/20">
|
||||
<span className="text-xs font-medium">
|
||||
{isReleased &&
|
||||
daysSinceRelease < 35 &&
|
||||
`od ${daysSinceRelease} dni`}
|
||||
{!isReleased && `za ${daysSinceRelease} dni`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 flex justify-center">
|
||||
<p className="text-white bg-black/60 backdrop-blur-sm px-2.5 leading-[2] rounded-xl border border-white/20 text-xs">
|
||||
{isReleased &&
|
||||
daysSinceRelease < 35 &&
|
||||
`od ${daysSinceRelease} dni`}
|
||||
{!isReleased && `za ${daysSinceRelease} dni`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status indicators */}
|
||||
{alreadyInStore && (
|
||||
<div className="absolute bottom-4 left-4 flex gap-2">
|
||||
<div className="absolute bottom-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
{!simpleToggle && (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
seen ? "bg-emerald-500/90" : "bg-white/20"
|
||||
} backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-emerald-400 transition-colors`}
|
||||
onClick={handleSeen}
|
||||
>
|
||||
<RxEyeOpen size={16} className="text-white" />
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
favorite ? "bg-rose-500/90" : "bg-white/20"
|
||||
} backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-rose-400 transition-colors`}
|
||||
onClick={handleFavorite}
|
||||
>
|
||||
<MdFavorite size={16} className="text-white" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
className={`${
|
||||
seen ? "bg-emerald-500/90" : "bg-white/20"
|
||||
} backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer`}
|
||||
onClick={handleSeen}
|
||||
>
|
||||
<RxEyeOpen size={16} className="text-white" />
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
favorite ? "bg-rose-500/90" : "bg-white/20"
|
||||
} backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer`}
|
||||
onClick={handleFavorite}
|
||||
>
|
||||
<MdFavorite size={16} className="text-white" />
|
||||
</div>
|
||||
<div
|
||||
className={`bg-white/20 backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer`}
|
||||
className={`bg-white/20 backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-red-400 transition-colors`}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<FaTrash size={16} className="text-white" />
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const MovieList: FC<Props> = ({
|
|||
)}
|
||||
{filteredMovies.length > 0 && (
|
||||
<div
|
||||
className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
|
||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
|
||||
ref={parent}
|
||||
>
|
||||
{sortedMovies.map((movie) => (
|
||||
|
|
|
|||
Loading…
Reference in New Issue