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

Enhance UI components with gradient backgrounds and improved interactions: update Button, Dropdown, MovieCard layouts (Aurora, Minimal, Zeus), Pagination, Navbar, and Search components to utilize gradient styles for a more visually appealing design. Refactor Pagination to use the new Button component for consistency.

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-17 18:53:15 +02:00
parent d386c8f703
commit b577a79278
9 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/Button/index.tsx
View File

@@ -33,5 +33,5 @@ const styles = {
primary:
"block relative bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl transition-all duration-300 hover:scale-105",
glass:
"p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105",
"p-3 rounded-xl bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/15 hover:scale-105 shadow-lg shadow-black/20",
};

1
src/components/atoms/Dropdown/index.tsx
View File

@@ -36,6 +36,7 @@ export const Dropdown: FC<Props> = ({ items, defaultValue, callback }) => {
className="absolute left-0 z-20 w-48 py-2 mt-2 origin-top-right bg-white rounded-md shadow-xl dark:bg-gray-800"
style={{
opacity: isOpen ? 1 : 0,
pointerEvents: isOpen ? "auto" : "none",
}}
>
{items.map((item) => (

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

@@ -57,7 +57,8 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
<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>
{/* Main card container */}
<div className="grid relative h-full bg-gradient-to-br from-slate-800/90 to-slate-900/90 backdrop-blur-xl border border-slate-700/50 shadow-2xl shadow-purple-500/10 group-hover:shadow-purple-500/20 transition-all duration-500">
<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">
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-cyan-500/5 opacity-80"></div>
{/* Image section with sophisticated overlay */}
<figure
className="relative overflow-hidden"
@@ -79,7 +80,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-2 rounded-xl shadow-lg backdrop-blur-sm`}
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>
@@ -90,7 +91,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
)}
{/* Popularity indicator */}
<div className="absolute top-4 left-4 bg-black/60 backdrop-blur-sm px-3 py-2 rounded-xl border border-white/20">
<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">
@@ -102,7 +103,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
{/* Days left to release */}
{(!isReleased || daysSinceRelease < 35) && (
<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">
<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`}
@@ -118,16 +119,20 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
<>
<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`}
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-rose-500/90" : "bg-white/20"
} backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-rose-400 transition-colors`}
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" />
@@ -135,7 +140,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
</>
)}
<div
className={`bg-white/20 backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-red-400 transition-colors`}
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`}
onClick={handleRemove}
>
<FaTrash size={16} className="text-white" />
@@ -222,10 +227,20 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
{isExpanded && (
<div
className="absolute inset-0 p-4 bg-black bg-gradient-to-t from-purple-500/30 to-secondary/30 cursor-pointer"
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>

6
src/components/atoms/MovieCard/layouts/MinimalLayout.tsx
View File

@@ -34,7 +34,7 @@ export const MinimalLayout: FC<MinimalLayoutProps> = ({
releaseDate,
}) => {
return (
<article className="group relative w-full h-[420px] bg-white/5 border border-white/10 rounded-xl overflow-hidden backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:shadow-lg hover:shadow-black/20">
<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"
@@ -44,7 +44,7 @@ export const MinimalLayout: FC<MinimalLayoutProps> = ({
{/* Rating badge */}
{!!vote_average && (
<div className="absolute top-3 right-3 bg-black/60 backdrop-blur-sm px-2 pr-3 pb-1 rounded-full">
<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>
@@ -52,7 +52,7 @@ export const MinimalLayout: FC<MinimalLayoutProps> = ({
)}
{/* Action overlay */}
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
<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}

2
src/components/atoms/MovieCard/layouts/ZeusLayout.tsx
View File

@@ -54,7 +54,7 @@ export const ZeusLayout: FC<ZeusLayoutProps> = ({
className="w-full object-cover"
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
/>
<span className="absolute inset-0 bg-black/30 backdrop-blur-md opacity-0 hover-any:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer">
<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" />

15
src/components/atoms/Pagination/index.tsx
View File

@@ -1,4 +1,5 @@
import { FC } from "react";
import { Button } from "../Button";
type Props = {
totalPages: number;
@@ -15,8 +16,8 @@ export const Pagination: FC<Props> = ({
<ul className="flex justify-center gap-3 my-10">
{currentPage > 1 && (
<li>
<button
className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
<Button
theme="glass"
aria-label="Previous page"
onClick={() => onPageChange(currentPage - 1)}
>
@@ -32,18 +33,18 @@ export const Pagination: FC<Props> = ({
clipRule="evenodd"
/>
</svg>
</button>
</Button>
</li>
)}
<li className="text-sm/8 font-medium tracking-widest">
<li className="text-sm/8 font-medium tracking-widest leading-[2.8]">
{currentPage}/{totalPages}
</li>
{currentPage < totalPages && (
<li>
<button
className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
<Button
theme="glass"
aria-label="Next page"
onClick={() => onPageChange(currentPage + 1)}
>
@@ -59,7 +60,7 @@ export const Pagination: FC<Props> = ({
clipRule="evenodd"
/>
</svg>
</button>
</Button>
</li>
)}
</ul>