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

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.

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-17 14:37:44 +02:00
parent 1175543e32
commit 983a362b80
3 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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" />