refactor: clean Aurora layout
This commit is contained in:
Norbert Maciaszek
parent
4166abeb7d
commit
5f2077a4ec
|
|
@ -2,10 +2,10 @@
|
|||
import { FC, useState } from "react";
|
||||
import { MdFavorite } from "react-icons/md";
|
||||
import { RxEyeOpen } from "react-icons/rx";
|
||||
import { FaFire, FaTrash, FaInfoCircle } from "react-icons/fa";
|
||||
import { FaFire, FaTrash, FaPlusCircle } from "react-icons/fa";
|
||||
import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
|
||||
import { Movie } from "@/types/global";
|
||||
import { Button } from "../../Button";
|
||||
import Link from "next/link";
|
||||
|
||||
interface AuroraLayoutProps extends Movie {
|
||||
showDayCounter?: boolean;
|
||||
|
|
@ -40,8 +40,6 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
releaseDate,
|
||||
simpleToggle,
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const scoreColor =
|
||||
vote_average >= 8
|
||||
? "from-emerald-400 to-teal-400"
|
||||
|
|
@ -50,10 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
: "from-red-400 to-pink-400";
|
||||
|
||||
return (
|
||||
<article
|
||||
className="group relative w-full overflow-hidden rounded-2xl"
|
||||
onMouseLeave={() => setIsExpanded(false)}
|
||||
>
|
||||
<article className="group relative w-full overflow-hidden rounded-2xl">
|
||||
{/* Aurora background effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20 opacity-60"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-pink-500/10 via-transparent to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
|
||||
|
|
@ -68,15 +63,17 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
aspectRatio: "342/513",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110"
|
||||
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
||||
alt={title}
|
||||
/>
|
||||
<Link href={`/film/${id}`}>
|
||||
<img
|
||||
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110"
|
||||
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"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-cyan-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-cyan-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
|
||||
|
||||
{/* Floating rating badge */}
|
||||
{!!vote_average && (
|
||||
|
|
@ -115,53 +112,48 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
)}
|
||||
|
||||
{/* Status indicators */}
|
||||
{alreadyInStore && (
|
||||
<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-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>
|
||||
</>
|
||||
)}
|
||||
<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-white/25 to-white/15 p-2 rounded-full cursor-pointer hover:bg-red-400 transition-colors border border-white/10 shadow-lg`}
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* Magical action overlay */}
|
||||
{!alreadyInStore && (
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
|
||||
<Button
|
||||
theme="primary"
|
||||
onClick={handleAdd}
|
||||
className="relative overflow-hidden"
|
||||
>
|
||||
<span className="relative z-10">Dodaj do listy</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
{/* Content section with glowing effects */}
|
||||
|
|
@ -170,15 +162,14 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
<div className="absolute inset-0 bg-gradient-to-t from-purple-500/5 to-transparent pointer-events-none"></div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<h3 className="font-bold text-xl leading-tight mb-3 text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-500">
|
||||
{title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity duration-300 hover:text-secondary cursor-pointer"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{overview}
|
||||
</p>
|
||||
<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 group-hover:opacity-100 transition-colors duration-300 hover:text-secondary">
|
||||
{overview}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Bottom section with enhanced styling */}
|
||||
|
|
@ -223,41 +214,8 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Zobacz więcej button */}
|
||||
<Button
|
||||
theme="teal"
|
||||
size="small"
|
||||
href={`/film/${id}`}
|
||||
className="transform hover:scale-105 transition-all duration-300 mt-4 flex justify-center items-center gap-2"
|
||||
>
|
||||
<FaInfoCircle size={14} />
|
||||
<span>Zobacz więcej</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Decorative border glow */}
|
||||
<div className="absolute inset-0 rounded-2xl border border-transparent bg-gradient-to-r from-purple-500/20 via-transparent to-cyan-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
{isExpanded && (
|
||||
<div
|
||||
className="absolute inset-0 p-4 bg-black bg-gradient-to-t from-purple-500/30 to-secondary/30 cursor-pointer z-10"
|
||||
style={{
|
||||
animation: "fadeIn 0.3s ease-in-out",
|
||||
}}
|
||||
onClick={() => setIsExpanded(false)}
|
||||
>
|
||||
<p>{overview}</p>
|
||||
<style jsx>{`
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue