gitadmin
/
moviebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: clean Aurora layout

This commit is contained in:
Norbert Maciaszek 2025-08-17 23:34:52 +02:00
parent 4166abeb7d
commit 5f2077a4ec
1 changed files with 57 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
View File

@ -2,10 +2,10 @@
import { FC, useState } from "react"; import { FC, useState } from "react";
import { MdFavorite } from "react-icons/md"; import { MdFavorite } from "react-icons/md";
import { RxEyeOpen } from "react-icons/rx"; 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 { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
import { Movie } from "@/types/global"; import { Movie } from "@/types/global";
import { Button } from "../../Button"; import Link from "next/link";
interface AuroraLayoutProps extends Movie { interface AuroraLayoutProps extends Movie {
showDayCounter?: boolean; showDayCounter?: boolean;
@ -40,8 +40,6 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
releaseDate, releaseDate,
simpleToggle, simpleToggle,
}) => { }) => {
const [isExpanded, setIsExpanded] = useState(false);
const scoreColor = const scoreColor =
vote_average >= 8 vote_average >= 8
? "from-emerald-400 to-teal-400" ? "from-emerald-400 to-teal-400"
@ -50,10 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
: "from-red-400 to-pink-400"; : "from-red-400 to-pink-400";
return ( return (
<article <article className="group relative w-full overflow-hidden rounded-2xl">
className="group relative w-full overflow-hidden rounded-2xl"
onMouseLeave={() => setIsExpanded(false)}
>
{/* Aurora background effect */} {/* 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-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> <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", aspectRatio: "342/513",
}} }}
> >
<img <Link href={`/film/${id}`}>
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110" <img
src={`http://image.tmdb.org/t/p/w342${poster_path}`} className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110"
alt={title} src={`http://image.tmdb.org/t/p/w342${poster_path}`}
/> alt={title}
/>
</Link>
{/* Gradient overlays for depth */} {/* 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-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"></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 pointer-events-none" />
{/* Floating rating badge */} {/* Floating rating badge */}
{!!vote_average && ( {!!vote_average && (
@ -115,53 +112,48 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
)} )}
{/* Status indicators */} {/* Status indicators */}
{alreadyInStore && ( <div className="absolute bottom-4 right-4 flex gap-2">
<div className="absolute bottom-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> {alreadyInStore && !simpleToggle && (
{!simpleToggle && ( <>
<> <div
<div className={`${
className={`${ seen
seen ? "bg-gradient-to-r from-emerald-500/95 to-emerald-600/90"
? "bg-gradient-to-r from-emerald-500/95 to-emerald-600/90" : "bg-gradient-to-r from-white/25 to-white/15"
: "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`}
} p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`} onClick={handleSeen}
onClick={handleSeen} >
> <RxEyeOpen size={16} className="text-white" />
<RxEyeOpen size={16} className="text-white" /> </div>
</div> <div
<div className={`${
className={`${ favorite
favorite ? "bg-gradient-to-r from-rose-500/95 to-rose-600/90"
? "bg-gradient-to-r from-rose-500/95 to-rose-600/90" : "bg-gradient-to-r from-white/25 to-white/15"
: "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`}
} p-2 rounded-full cursor-pointer hover:bg-rose-400 transition-colors border border-white/10 shadow-lg`} onClick={handleFavorite}
onClick={handleFavorite} >
> <MdFavorite size={16} className="text-white" />
<MdFavorite size={16} className="text-white" /> </div>
</div> </>
</> )}
)} {!alreadyInStore && (
<div <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} onClick={handleRemove}
> >
<FaTrash size={16} className="text-white" /> <FaTrash size={16} className="text-white" />
</div> </div>
</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>
)}
</figure> </figure>
{/* Content section with glowing effects */} {/* 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="absolute inset-0 bg-gradient-to-t from-purple-500/5 to-transparent pointer-events-none"></div>
<div className="relative z-10"> <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"> <Link href={`/film/${id}`}>
{title} <h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
</h3> {title}
<p </h3>
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" <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">
onClick={() => setIsExpanded(!isExpanded)} {overview}
> </p>
{overview} </Link>
</p>
</div> </div>
{/* Bottom section with enhanced styling */} {/* Bottom section with enhanced styling */}
@ -223,41 +214,8 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
)} )}
</div> </div>
</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> </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> </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> </article>
); );
}; };