feat: update layout and MovieCard components to enhance styling and functionality; replace layout system with a unified MovieCard design, adjust display types in Odkrywaj and GenrePage, and improve pagination button styles
This commit is contained in:
Norbert Maciaszek
parent
d67e34c75c
commit
452be796f0
|
|
@ -26,7 +26,7 @@ export default async function RootLayout({
|
|||
<GlobalStoreProvider initialMovies={movies}>
|
||||
<AuroraBackground />
|
||||
<Navbar />
|
||||
<main className="relative pb-10">{children}</main>
|
||||
<main className="relative [&>*:last-child]:pb-16">{children}</main>
|
||||
</GlobalStoreProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export default async function GenrePage({ params }: PageProps) {
|
|||
icon={<FaCalendar />}
|
||||
colors="green"
|
||||
showFilters={false}
|
||||
displayType="list"
|
||||
overrideDisplayType="list"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ export default async function GenrePage({ params }: PageProps) {
|
|||
colors="blue"
|
||||
showFilters={false}
|
||||
sortDirection="desc"
|
||||
displayType="list"
|
||||
overrideDisplayType="list"
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
|
|
@ -125,7 +125,7 @@ export default async function GenrePage({ params }: PageProps) {
|
|||
icon={<FaFire />}
|
||||
colors="red"
|
||||
showFilters={false}
|
||||
displayType="list"
|
||||
overrideDisplayType="list"
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default async function Home() {
|
|||
icon={<FaPlay />}
|
||||
colors="blue"
|
||||
showFilters={false}
|
||||
displayType="list"
|
||||
overrideDisplayType="grid"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ export default async function Home() {
|
|||
icon={<FaCalendar />}
|
||||
colors="blue"
|
||||
showFilters={false}
|
||||
displayType="list"
|
||||
overrideDisplayType="grid"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ export default async function Home() {
|
|||
icon={<FaFire />}
|
||||
colors="red"
|
||||
showFilters={false}
|
||||
displayType="list"
|
||||
overrideDisplayType="grid"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ export default async function Home() {
|
|||
icon={<FaChartLine />}
|
||||
colors="green"
|
||||
showFilters={false}
|
||||
displayType="list"
|
||||
overrideDisplayType="grid"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,21 +2,18 @@
|
|||
import { FC } from "react";
|
||||
import { useGlobalStore } from "@/app/store/globalStore";
|
||||
import { Movie } from "@/types/global";
|
||||
import {
|
||||
AuroraLayout,
|
||||
MinimalLayout,
|
||||
ZeusLayout,
|
||||
DefaultLayout,
|
||||
} from "./layouts";
|
||||
import { FaFire, FaPlusCircle, FaTrash } from "react-icons/fa";
|
||||
import Link from "next/link";
|
||||
import { RxEyeOpen } from "react-icons/rx";
|
||||
import { MdFavorite } from "react-icons/md";
|
||||
import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
|
||||
|
||||
type Props = Movie & {
|
||||
layout?: "default" | "zeus" | "minimal" | "aurora";
|
||||
showDayCounter?: boolean;
|
||||
simpleToggle?: boolean;
|
||||
};
|
||||
|
||||
export const MovieCard: FC<Props> = ({
|
||||
layout = "aurora",
|
||||
showDayCounter = true,
|
||||
simpleToggle = false,
|
||||
...movie
|
||||
|
|
@ -27,14 +24,21 @@ export const MovieCard: FC<Props> = ({
|
|||
deleteMovie: deleteMovieFromStore,
|
||||
updateMovie: updateMovieInStore,
|
||||
} = useGlobalStore();
|
||||
const { vote_average, popularity, poster_path, title, overview } = movie;
|
||||
|
||||
const { id } = movie;
|
||||
const alreadyInStore = movies.find((m) => m.id === id);
|
||||
|
||||
const seen = alreadyInStore?.seen || movie.seen;
|
||||
const favorite = alreadyInStore?.favorite || movie.favorite;
|
||||
|
||||
const isReleased = new Date(movie.release_date) < new Date();
|
||||
const iconSize = 48;
|
||||
const buttonClass =
|
||||
"p-4 text-sm transition-colors cursor-pointer text-center group/toggle";
|
||||
const scoreColor =
|
||||
vote_average >= 8
|
||||
? "from-emerald-400 to-teal-400"
|
||||
: vote_average >= 6
|
||||
? "from-yellow-400 to-orange-400"
|
||||
: "from-red-400 to-pink-400";
|
||||
|
||||
const handleAdd = () => {
|
||||
addMovieToStore(movie);
|
||||
|
|
@ -65,32 +69,161 @@ export const MovieCard: FC<Props> = ({
|
|||
)
|
||||
);
|
||||
|
||||
const commonProps = {
|
||||
...movie,
|
||||
alreadyInStore,
|
||||
isReleased,
|
||||
handleAdd,
|
||||
handleRemove,
|
||||
handleSeen,
|
||||
handleFavorite,
|
||||
daysSinceRelease,
|
||||
releaseDate,
|
||||
showDayCounter,
|
||||
simpleToggle,
|
||||
buttonClass,
|
||||
iconSize,
|
||||
favorite: alreadyInStore?.favorite || movie.favorite,
|
||||
seen: alreadyInStore?.seen || movie.seen,
|
||||
};
|
||||
return (
|
||||
<article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
|
||||
{/* Main card container */}
|
||||
<div className="grid relative h-full bg-gradient-to-br from-slate-800/95 via-slate-850/97 to-slate-900/95 border border-slate-700/50 shadow-2xl shadow-purple-500/10 group-hover:shadow-purple-500/20 transition-all duration-500">
|
||||
{/* Image section with sophisticated overlay */}
|
||||
<figure className="relative overflow-hidden aspect-[4/3] lg:aspect-[342/513]">
|
||||
<Link href={`/film/${id}`}>
|
||||
<img
|
||||
className="w-full h-full object-cover transition-all duration-700 hover:scale-110 hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
|
||||
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
||||
alt={title}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
switch (layout) {
|
||||
case "aurora":
|
||||
return <AuroraLayout {...commonProps} />;
|
||||
case "minimal":
|
||||
return <MinimalLayout {...commonProps} />;
|
||||
case "zeus":
|
||||
return <ZeusLayout {...commonProps} />;
|
||||
default:
|
||||
return <DefaultLayout {...commonProps} />;
|
||||
}
|
||||
{/* Gradient overlays for depth */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
|
||||
|
||||
{/* Floating rating badge */}
|
||||
{!!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-2 rounded-xl shadow-lg border border-white/10`}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-white font-bold">
|
||||
<span className="text-xl">★</span>
|
||||
<span className="text-lg">{vote_average.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Popularity indicator */}
|
||||
<div className="absolute top-4 left-4 bg-gradient-to-br from-black/80 to-slate-900/85 px-3 py-2 rounded-xl border border-white/20 shadow-lg">
|
||||
<div className="flex items-center gap-2 text-orange-400">
|
||||
<FaFire className="animate-pulse" />
|
||||
<span className="text-sm font-medium">
|
||||
{Math.round(popularity)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Days left to release */}
|
||||
{(!isReleased || daysSinceRelease < 35) && (
|
||||
<div className="absolute bottom-4 left-4 flex justify-center">
|
||||
<p className="text-white bg-gradient-to-r from-black/75 to-slate-900/80 px-2.5 leading-[2] rounded-xl border border-white/20 text-xs shadow-lg">
|
||||
{isReleased &&
|
||||
daysSinceRelease < 35 &&
|
||||
`od ${daysSinceRelease} dni`}
|
||||
{!isReleased && `za ${daysSinceRelease} dni`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status indicators */}
|
||||
<div className="absolute bottom-4 right-4 flex gap-2">
|
||||
{alreadyInStore && !simpleToggle && (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
seen
|
||||
? "bg-gradient-to-r from-emerald-500/95 to-emerald-600/90"
|
||||
: "bg-gradient-to-r from-white/25 to-white/15"
|
||||
} p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleSeen}
|
||||
>
|
||||
<RxEyeOpen size={16} className="text-white" />
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
favorite
|
||||
? "bg-gradient-to-r from-rose-500/95 to-rose-600/90"
|
||||
: "bg-gradient-to-r from-white/25 to-white/15"
|
||||
} p-2 rounded-full cursor-pointer hover:bg-rose-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleFavorite}
|
||||
>
|
||||
<MdFavorite size={16} className="text-white" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!alreadyInStore && (
|
||||
<div
|
||||
className={`bg-gradient-to-r from-emerald-500/50 to-emerald-600/50 p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleAdd}
|
||||
>
|
||||
<FaPlusCircle size={16} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
{alreadyInStore && (
|
||||
<div
|
||||
className={`bg-gradient-to-r from-red-400/25 to-red-400/15 p-2 rounded-full cursor-pointer hover:bg-red-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<FaTrash size={16} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
{/* Content section with glowing effects */}
|
||||
<div className="relative p-6 flex flex-col justify-between">
|
||||
<div className="relative z-10">
|
||||
<Link href={`/film/${id}`}>
|
||||
<h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 transition-colors duration-300 hover:text-secondary">
|
||||
{overview}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Bottom section with enhanced styling */}
|
||||
<div className="relative z-10 flex items-center justify-between pt-4 mt-4 border-t border-gradient-to-r border-slate-700/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`flex items-center gap-1 text-sm ${
|
||||
isReleased ? "text-emerald-400" : "text-amber-400"
|
||||
}`}
|
||||
>
|
||||
{isReleased ? (
|
||||
<RiCalendarCheckLine />
|
||||
) : (
|
||||
<RiCalendarScheduleLine />
|
||||
)}
|
||||
<span className="font-medium">
|
||||
{releaseDate.toLocaleDateString("pl-PL", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{alreadyInStore && (
|
||||
<div className="flex gap-2">
|
||||
{seen && (
|
||||
<div
|
||||
className="w-3 h-3 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full shadow-lg shadow-emerald-400/50 animate-pulse"
|
||||
title="Watched"
|
||||
/>
|
||||
)}
|
||||
{favorite && (
|
||||
<div
|
||||
className="w-3 h-3 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full shadow-lg shadow-rose-400/50 animate-pulse"
|
||||
title="Favorite"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,207 +0,0 @@
|
|||
"use client";
|
||||
import { FC, useState } from "react";
|
||||
import { MdFavorite } from "react-icons/md";
|
||||
import { RxEyeOpen } from "react-icons/rx";
|
||||
import { FaFire, FaTrash, FaPlusCircle } from "react-icons/fa";
|
||||
import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
|
||||
import { Movie } from "@/types/global";
|
||||
import Link from "next/link";
|
||||
|
||||
interface AuroraLayoutProps extends Movie {
|
||||
showDayCounter?: boolean;
|
||||
simpleToggle?: boolean;
|
||||
alreadyInStore?: Movie | undefined;
|
||||
isReleased: boolean;
|
||||
handleAdd: () => void;
|
||||
handleRemove: () => void;
|
||||
handleSeen: () => void;
|
||||
handleFavorite: () => void;
|
||||
daysSinceRelease: number;
|
||||
releaseDate: Date;
|
||||
}
|
||||
|
||||
export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
||||
id,
|
||||
title,
|
||||
overview,
|
||||
popularity,
|
||||
release_date,
|
||||
poster_path,
|
||||
vote_average,
|
||||
seen,
|
||||
favorite,
|
||||
alreadyInStore,
|
||||
isReleased,
|
||||
handleAdd,
|
||||
handleRemove,
|
||||
handleSeen,
|
||||
handleFavorite,
|
||||
daysSinceRelease,
|
||||
releaseDate,
|
||||
simpleToggle,
|
||||
}) => {
|
||||
const scoreColor =
|
||||
vote_average >= 8
|
||||
? "from-emerald-400 to-teal-400"
|
||||
: vote_average >= 6
|
||||
? "from-yellow-400 to-orange-400"
|
||||
: "from-red-400 to-pink-400";
|
||||
|
||||
return (
|
||||
<article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
|
||||
{/* Main card container */}
|
||||
<div className="grid relative h-full bg-gradient-to-br from-slate-800/95 via-slate-850/97 to-slate-900/95 border border-slate-700/50 shadow-2xl shadow-purple-500/10 group-hover:shadow-purple-500/20 transition-all duration-500">
|
||||
{/* Image section with sophisticated overlay */}
|
||||
<figure className="relative overflow-hidden aspect-[4/3] lg:aspect-[342/513]">
|
||||
<Link href={`/film/${id}`}>
|
||||
<img
|
||||
className="w-full h-full object-cover transition-all duration-700 hover:scale-110 hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
|
||||
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
||||
alt={title}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Gradient overlays for depth */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
|
||||
|
||||
{/* Floating rating badge */}
|
||||
{!!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-2 rounded-xl shadow-lg border border-white/10`}
|
||||
>
|
||||
<div className="flex items-center gap-2 text-white font-bold">
|
||||
<span className="text-xl">★</span>
|
||||
<span className="text-lg">{vote_average.toFixed(1)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Popularity indicator */}
|
||||
<div className="absolute top-4 left-4 bg-gradient-to-br from-black/80 to-slate-900/85 px-3 py-2 rounded-xl border border-white/20 shadow-lg">
|
||||
<div className="flex items-center gap-2 text-orange-400">
|
||||
<FaFire className="animate-pulse" />
|
||||
<span className="text-sm font-medium">
|
||||
{Math.round(popularity)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Days left to release */}
|
||||
{(!isReleased || daysSinceRelease < 35) && (
|
||||
<div className="absolute bottom-4 left-4 flex justify-center">
|
||||
<p className="text-white bg-gradient-to-r from-black/75 to-slate-900/80 px-2.5 leading-[2] rounded-xl border border-white/20 text-xs shadow-lg">
|
||||
{isReleased &&
|
||||
daysSinceRelease < 35 &&
|
||||
`od ${daysSinceRelease} dni`}
|
||||
{!isReleased && `za ${daysSinceRelease} dni`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Status indicators */}
|
||||
<div className="absolute bottom-4 right-4 flex gap-2">
|
||||
{alreadyInStore && !simpleToggle && (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
seen
|
||||
? "bg-gradient-to-r from-emerald-500/95 to-emerald-600/90"
|
||||
: "bg-gradient-to-r from-white/25 to-white/15"
|
||||
} p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleSeen}
|
||||
>
|
||||
<RxEyeOpen size={16} className="text-white" />
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
favorite
|
||||
? "bg-gradient-to-r from-rose-500/95 to-rose-600/90"
|
||||
: "bg-gradient-to-r from-white/25 to-white/15"
|
||||
} p-2 rounded-full cursor-pointer hover:bg-rose-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleFavorite}
|
||||
>
|
||||
<MdFavorite size={16} className="text-white" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!alreadyInStore && (
|
||||
<div
|
||||
className={`bg-gradient-to-r from-emerald-500/50 to-emerald-600/50 p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleAdd}
|
||||
>
|
||||
<FaPlusCircle size={16} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
{alreadyInStore && (
|
||||
<div
|
||||
className={`bg-gradient-to-r from-red-400/25 to-red-400/15 p-2 rounded-full cursor-pointer hover:bg-red-400 transition-colors border border-white/10 shadow-lg`}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<FaTrash size={16} className="text-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
{/* Content section with glowing effects */}
|
||||
<div className="relative p-6 flex flex-col justify-between">
|
||||
<div className="relative z-10">
|
||||
<Link href={`/film/${id}`}>
|
||||
<h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 transition-colors duration-300 hover:text-secondary">
|
||||
{overview}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Bottom section with enhanced styling */}
|
||||
<div className="relative z-10 flex items-center justify-between pt-4 mt-4 border-t border-gradient-to-r border-slate-700/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`flex items-center gap-1 text-sm ${
|
||||
isReleased ? "text-emerald-400" : "text-amber-400"
|
||||
}`}
|
||||
>
|
||||
{isReleased ? (
|
||||
<RiCalendarCheckLine />
|
||||
) : (
|
||||
<RiCalendarScheduleLine />
|
||||
)}
|
||||
<span className="font-medium">
|
||||
{releaseDate.toLocaleDateString("pl-PL", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{alreadyInStore && (
|
||||
<div className="flex gap-2">
|
||||
{seen && (
|
||||
<div
|
||||
className="w-3 h-3 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full shadow-lg shadow-emerald-400/50 animate-pulse"
|
||||
title="Watched"
|
||||
/>
|
||||
)}
|
||||
{favorite && (
|
||||
<div
|
||||
className="w-3 h-3 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full shadow-lg shadow-rose-400/50 animate-pulse"
|
||||
title="Favorite"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
"use client";
|
||||
import { FC } from "react";
|
||||
import { ReadMore } from "../../ReadMore";
|
||||
import { Movie } from "@/types/global";
|
||||
|
||||
interface DefaultLayoutProps extends Movie {
|
||||
showDayCounter?: boolean;
|
||||
simpleToggle?: boolean;
|
||||
alreadyInStore?: Movie | undefined;
|
||||
isReleased: boolean;
|
||||
handleAdd: () => void;
|
||||
handleRemove: () => void;
|
||||
handleSeen: () => void;
|
||||
handleFavorite: () => void;
|
||||
buttonClass: string;
|
||||
}
|
||||
|
||||
export const DefaultLayout: FC<DefaultLayoutProps> = ({
|
||||
title,
|
||||
overview,
|
||||
popularity,
|
||||
release_date,
|
||||
poster_path,
|
||||
alreadyInStore,
|
||||
isReleased,
|
||||
handleAdd,
|
||||
handleRemove,
|
||||
handleSeen,
|
||||
handleFavorite,
|
||||
buttonClass,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex w-full shadow-md rounded-lg overflow-hidden mx-auto group/card">
|
||||
<div className="overflow-hidden rounded-xl relative movie-item text-white movie-card">
|
||||
<div className="absolute inset-0 z-10 bg-gradient-to-t from-black via-gray-900 to-transparent"></div>
|
||||
<div className="relative group z-10 p-6 space-y-6 h-full">
|
||||
<div className="align-self-end w-full h-full flex flex-col">
|
||||
<div className="h-64"></div>
|
||||
<div className="flex flex-col space-y-2 inner mb-4">
|
||||
<h3
|
||||
className="text-lg leading-[1.3] font-bold text-white line-clamp-1"
|
||||
title={title}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
<div className="text-xs text-gray-400">
|
||||
<ReadMore text={overview} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row justify-between mt-auto">
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-400">Popularity:</div>
|
||||
<div className="popularity">{popularity}</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-400">Release date:</div>
|
||||
<div className="release">{release_date}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-0 z-10 bg-transparent inset-0 group-hover/card:bg-black/50 transition-all opacity-0 group-hover/card:opacity-100 flex flex-col justify-center">
|
||||
{!alreadyInStore && (
|
||||
<button
|
||||
className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
|
||||
onClick={handleAdd}
|
||||
>
|
||||
Add to list
|
||||
</button>
|
||||
)}
|
||||
{alreadyInStore && (
|
||||
<>
|
||||
{isReleased && (
|
||||
<button
|
||||
className={`${buttonClass} bg-accent/70 text-white hover:bg-accent`}
|
||||
onClick={handleSeen}
|
||||
>
|
||||
{alreadyInStore.seen ? "Mark as unseen" : "Mark as seen"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className={`${buttonClass} bg-amber-400/70 text-white hover:bg-amber-500`}
|
||||
onClick={handleFavorite}
|
||||
>
|
||||
{alreadyInStore.favorite
|
||||
? "Remove favorite"
|
||||
: "Add to favorites"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
Remove from list
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<figure className="absolute inset-0 w-full bottom-[20%]">
|
||||
<img
|
||||
className="w-full h-96 object-cover"
|
||||
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
"use client";
|
||||
import { FC } from "react";
|
||||
import { ReadMore } from "../../ReadMore";
|
||||
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
|
||||
import { RxEyeOpen, RxEyeClosed } from "react-icons/rx";
|
||||
import { IoMdRemoveCircleOutline } from "react-icons/io";
|
||||
import { Movie } from "@/types/global";
|
||||
|
||||
interface MinimalLayoutProps extends Movie {
|
||||
showDayCounter?: boolean;
|
||||
simpleToggle?: boolean;
|
||||
alreadyInStore?: Movie | undefined;
|
||||
isReleased: boolean;
|
||||
handleAdd: () => void;
|
||||
handleRemove: () => void;
|
||||
handleSeen: () => void;
|
||||
handleFavorite: () => void;
|
||||
releaseDate: Date;
|
||||
}
|
||||
|
||||
export const MinimalLayout: FC<MinimalLayoutProps> = ({
|
||||
title,
|
||||
overview,
|
||||
poster_path,
|
||||
vote_average,
|
||||
seen,
|
||||
favorite,
|
||||
alreadyInStore,
|
||||
isReleased,
|
||||
handleAdd,
|
||||
handleRemove,
|
||||
handleSeen,
|
||||
handleFavorite,
|
||||
releaseDate,
|
||||
}) => {
|
||||
return (
|
||||
<article className="group relative w-full h-[420px] bg-gradient-to-br from-white/8 via-slate-800/5 to-white/5 border border-white/10 rounded-xl overflow-hidden transition-all duration-300 hover:bg-gradient-to-br hover:from-white/15 hover:to-white/8 hover:border-white/20 hover:shadow-lg hover:shadow-black/20">
|
||||
<figure className="relative h-[280px] overflow-hidden">
|
||||
<img
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
||||
alt={title}
|
||||
/>
|
||||
|
||||
{/* Rating badge */}
|
||||
{!!vote_average && (
|
||||
<div className="absolute top-3 right-3 bg-gradient-to-br from-black/75 to-slate-900/80 px-2 pr-3 pb-1 rounded-full border border-white/10 shadow-lg">
|
||||
<span className="text-xs font-medium text-yellow-400">
|
||||
★ {vote_average.toFixed(1)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-slate-900/75 to-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
|
||||
{!alreadyInStore ? (
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
className="bg-white text-black px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:bg-gray-100 hover:scale-105"
|
||||
>
|
||||
Add to List
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
{isReleased && (
|
||||
<button
|
||||
onClick={handleSeen}
|
||||
className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
|
||||
seen
|
||||
? "bg-green-500 text-white"
|
||||
: "bg-white/20 text-white hover:bg-white/30"
|
||||
}`}
|
||||
>
|
||||
{seen ? <RxEyeOpen size={20} /> : <RxEyeClosed size={20} />}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleFavorite}
|
||||
className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
|
||||
favorite
|
||||
? "bg-red-500 text-white"
|
||||
: "bg-white/20 text-white hover:bg-white/30"
|
||||
}`}
|
||||
>
|
||||
{favorite ? (
|
||||
<MdFavorite size={20} />
|
||||
) : (
|
||||
<MdFavoriteBorder size={20} />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRemove}
|
||||
className="p-2 rounded-lg bg-white/20 text-white hover:bg-red-500 transition-all duration-200 hover:scale-110"
|
||||
>
|
||||
<IoMdRemoveCircleOutline size={20} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
{/* Content section */}
|
||||
<div className="p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg leading-tight line-clamp-2 mb-2 transition-colors duration-200 group-hover:text-white/90">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="text-sm text-gray-400 leading-relaxed">
|
||||
<ReadMore text={overview} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-3 pt-3 border-t border-white/10">
|
||||
<span className="text-xs text-gray-500 font-medium">
|
||||
{releaseDate.toLocaleDateString("pl-PL", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
{alreadyInStore && (
|
||||
<div className="flex gap-1">
|
||||
{seen && (
|
||||
<div
|
||||
className="w-2 h-2 bg-green-400 rounded-full"
|
||||
title="Watched"
|
||||
/>
|
||||
)}
|
||||
{favorite && (
|
||||
<div
|
||||
className="w-2 h-2 bg-red-400 rounded-full"
|
||||
title="Favorite"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
"use client";
|
||||
import { FC } from "react";
|
||||
import { ReadMore } from "../../ReadMore";
|
||||
import { MdFavorite, MdFavoriteBorder, MdOutlinePostAdd } from "react-icons/md";
|
||||
import { RxEyeOpen, RxEyeClosed } from "react-icons/rx";
|
||||
import { IoMdRemoveCircleOutline } from "react-icons/io";
|
||||
import { FaFire } from "react-icons/fa";
|
||||
import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
|
||||
import { Movie } from "@/types/global";
|
||||
|
||||
interface ZeusLayoutProps extends Movie {
|
||||
showDayCounter?: boolean;
|
||||
simpleToggle?: boolean;
|
||||
alreadyInStore?: Movie | undefined;
|
||||
isReleased: boolean;
|
||||
handleAdd: () => void;
|
||||
handleRemove: () => void;
|
||||
handleSeen: () => void;
|
||||
handleFavorite: () => void;
|
||||
daysSinceRelease: number;
|
||||
releaseDate: Date;
|
||||
buttonClass: string;
|
||||
iconSize: number;
|
||||
}
|
||||
|
||||
export const ZeusLayout: FC<ZeusLayoutProps> = ({
|
||||
title,
|
||||
overview,
|
||||
popularity,
|
||||
poster_path,
|
||||
vote_average,
|
||||
seen,
|
||||
favorite,
|
||||
showDayCounter,
|
||||
simpleToggle,
|
||||
alreadyInStore,
|
||||
isReleased,
|
||||
handleAdd,
|
||||
handleRemove,
|
||||
handleSeen,
|
||||
handleFavorite,
|
||||
daysSinceRelease,
|
||||
releaseDate,
|
||||
buttonClass,
|
||||
iconSize,
|
||||
}) => {
|
||||
return (
|
||||
<article className="flex flex-col w-full shadow-lg rounded-t-lg overflow-hidden bg-black/50 shadow-white/5">
|
||||
<figure className="relative ">
|
||||
<img
|
||||
style={{
|
||||
aspectRatio: "342/513",
|
||||
}}
|
||||
className="w-full object-cover"
|
||||
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
||||
/>
|
||||
<span className="absolute inset-0 bg-gradient-to-t from-black/60 via-slate-900/40 to-black/30 opacity-0 hover-any:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer">
|
||||
{!alreadyInStore && (
|
||||
<button className={buttonClass} onClick={handleAdd}>
|
||||
<MdOutlinePostAdd size={64} color="white" />
|
||||
</button>
|
||||
)}
|
||||
{alreadyInStore && (
|
||||
<div className="flex flex-col">
|
||||
<>
|
||||
{isReleased && !simpleToggle && (
|
||||
<button
|
||||
className={`${buttonClass} text-white`}
|
||||
onClick={handleSeen}
|
||||
>
|
||||
<span className="group-hover/toggle:hidden">
|
||||
{seen ? (
|
||||
<RxEyeOpen size={iconSize} />
|
||||
) : (
|
||||
<RxEyeClosed size={iconSize} />
|
||||
)}
|
||||
</span>
|
||||
<span className="hidden group-hover/toggle:block">
|
||||
{seen ? (
|
||||
<RxEyeClosed size={iconSize} />
|
||||
) : (
|
||||
<RxEyeOpen size={iconSize} />
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!simpleToggle && (
|
||||
<button
|
||||
className={`${buttonClass} text-amber-400`}
|
||||
onClick={handleFavorite}
|
||||
>
|
||||
<span className="group-hover/toggle:hidden">
|
||||
{favorite ? (
|
||||
<MdFavorite size={iconSize} />
|
||||
) : (
|
||||
<MdFavoriteBorder size={iconSize} />
|
||||
)}
|
||||
</span>
|
||||
<span className="hidden group-hover/toggle:block">
|
||||
{favorite ? (
|
||||
<MdFavoriteBorder size={iconSize} />
|
||||
) : (
|
||||
<MdFavorite size={iconSize} />
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className={`${buttonClass} text-red-500`}
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<IoMdRemoveCircleOutline size={iconSize} />
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<span className="absolute top-0 right-0 bg-black/50 px-2 py-1 rounded-bl-lg">
|
||||
<p className="text-sm text-white flex items-center gap-1">
|
||||
<FaFire />
|
||||
{popularity}
|
||||
</p>
|
||||
</span>
|
||||
</figure>
|
||||
<div className="p-4">
|
||||
{!!vote_average && (
|
||||
<p className="flex items-center gap-1 text-sm mb-2">
|
||||
<span className="text-yellow-400">★</span>
|
||||
<span>{vote_average.toFixed(1)}/10</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between">
|
||||
<h2 className="text-xl leading-[1.1] font-bold">{title}</h2>
|
||||
</div>
|
||||
|
||||
<p
|
||||
className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${
|
||||
isReleased ? "text-green-700" : "text-yellow-500"
|
||||
}`}
|
||||
>
|
||||
{isReleased ? <RiCalendarCheckLine /> : <RiCalendarScheduleLine />}
|
||||
<span>
|
||||
{releaseDate.toLocaleDateString("pl-PL", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</p>
|
||||
{showDayCounter && (
|
||||
<span className="text-xs text-gray-400">
|
||||
{isReleased
|
||||
? `${daysSinceRelease} dni od premiery`
|
||||
: `${daysSinceRelease} dni do premiery`}
|
||||
</span>
|
||||
)}
|
||||
<div className="text-xs text-gray-400 mt-4">
|
||||
<ReadMore text={overview} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export { AuroraLayout } from "./AuroraLayout";
|
||||
export { MinimalLayout } from "./MinimalLayout";
|
||||
export { ZeusLayout } from "./ZeusLayout";
|
||||
export { DefaultLayout } from "./DefaultLayout";
|
||||
|
|
@ -18,6 +18,7 @@ export const Pagination: FC<Props> = ({
|
|||
<li>
|
||||
<Button
|
||||
theme="glass"
|
||||
size="icon"
|
||||
aria-label="Previous page"
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
>
|
||||
|
|
@ -45,6 +46,7 @@ export const Pagination: FC<Props> = ({
|
|||
<li>
|
||||
<Button
|
||||
theme="glass"
|
||||
size="icon"
|
||||
aria-label="Next page"
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@ export const MovieList: FC<Props> = ({
|
|||
>
|
||||
{sortedMovies.map((movie) =>
|
||||
displayType === "grid" ? (
|
||||
<MovieCard key={movie.id} layout="aurora" {...movie} />
|
||||
<MovieCard key={movie.id} {...movie} />
|
||||
) : (
|
||||
<MovieRow key={movie.id} movie={movie} compact />
|
||||
)
|
||||
|
|
|
|||
|
|
@ -58,6 +58,8 @@ export const SearchList: FC<Props> = ({ query }) => {
|
|||
</div>
|
||||
)}
|
||||
<MovieList
|
||||
showFilters={false}
|
||||
overrideDisplayType="grid"
|
||||
overrideMovies={results?.map((m) => ({
|
||||
...m,
|
||||
favorite: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue