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

refactor: enhance movie details and UI components for better user experience

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-17 23:41:22 +02:00
parent 5f2077a4ec
commit f498f2d217
4 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/organisms/Hero/index.tsx
View File

@@ -12,6 +12,8 @@ import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
import { useGlobalStore } from "@/app/store/globalStore";
import { addMovie, deleteMovie } from "@/lib/db";
import { ReadMore } from "@/components/atoms/ReadMore";
import Link from "next/link";
import { Button } from "@/components/atoms/Button";
type Props = {
movies: Movie[];
@@ -153,11 +155,13 @@ export const Hero: FC<Props> = ({
>
{/* Poster */}
<div className="flex-shrink-0">
<img
src={`http://image.tmdb.org/t/p/w500${poster_path}`}
alt={title}
className="w-64 h-96 object-cover rounded-lg shadow-2xl"
/>
<Link href={`/film/${id}`}>
<img
src={`http://image.tmdb.org/t/p/w500${poster_path}`}
alt={title}
className="w-64 h-96 object-cover rounded-lg shadow-2xl hover:scale-105 transition-transform duration-300"
/>
</Link>
</div>
{/* Movie details */}
@@ -167,8 +171,8 @@ export const Hero: FC<Props> = ({
{preheading}
</h3>
)}
<h2 className="text-4xl lg:text-6xl font-bold text-white mb-4 leading-tight">
{title}
<h2 className="text-4xl lg:text-6xl font-bold text-white mb-4 leading-tight hover:text-secondary transition-colors duration-300">
<Link href={`/film/${id}`}>{title}</Link>
</h2>
{/* Movie meta info */}
@@ -204,23 +208,21 @@ export const Hero: FC<Props> = ({
</div>
{/* Overview */}
<div className="text-lg lg:text-xl text-white/90 mb-8 max-w-2xl leading-relaxed">
<ReadMore text={overview} />
</div>
<p className="text-lg lg:text-xl text-white/90 mb-8 max-w-2xl leading-relaxed line-clamp-3 hover:text-secondary transition-all duration-300">
<Link href={`/film/${id}`}>{overview}</Link>
</p>
{/* Action buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
<button
<Button
theme={alreadyInStore ? "primary" : "secondary"}
onClick={alreadyInStore ? handleRemove : handleAdd}
className={`flex items-center justify-center gap-3 px-8 py-3 rounded-lg font-semibold text-lg text-white transition-colors cursor-pointer ${
alreadyInStore
? "bg-red-500 hover:bg-red-600"
: "bg-primary hover:bg-primary/80"
}`}
>
{alreadyInStore ? <FaMinus /> : <FaPlus />}
{alreadyInStore ? "Usuń z listy" : "Dodaj do listy"}
</button>
<span>
{alreadyInStore ? "Usuń z listy" : "Dodaj do listy"}
</span>
</Button>
</div>
</div>
</div>