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

Enhance MovieCard component: add simpleToggle prop to conditionally render favorite button and update vote average display logic for improved user experience. Update Hero component styles for better visual consistency.

This commit is contained in:
Norbert Maciaszek 2025-08-15 17:13:52 +02:00
parent 0ee6fedcf3
commit 54e2e74e3a
3 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/atoms/MovieCard/index.tsx
View File

@ -13,6 +13,7 @@ import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
type Props = Movie & { type Props = Movie & {
layout?: "default" | "zeus"; layout?: "default" | "zeus";
showDayCounter?: boolean; showDayCounter?: boolean;
simpleToggle?: boolean;
}; };
const buttonClass = const buttonClass =
@ -21,6 +22,7 @@ const buttonClass =
export const MovieCard: FC<Props> = ({ export const MovieCard: FC<Props> = ({
layout = "default", layout = "default",
showDayCounter = true, showDayCounter = true,
simpleToggle = false,
...movie ...movie
}) => { }) => {
const { const {
@ -93,7 +95,7 @@ export const MovieCard: FC<Props> = ({
{alreadyInStore && ( {alreadyInStore && (
<div className="flex flex-col"> <div className="flex flex-col">
<> <>
{isReleased && ( {isReleased && !simpleToggle && (
<button <button
className={`${buttonClass} text-white`} className={`${buttonClass} text-white`}
onClick={handleSeen} onClick={handleSeen}
@ -115,25 +117,27 @@ export const MovieCard: FC<Props> = ({
</button> </button>
)} )}
<button {!simpleToggle && (
className={`${buttonClass} text-amber-400`} <button
onClick={handleFavorite} className={`${buttonClass} text-amber-400`}
> onClick={handleFavorite}
<span className="group-hover/toggle:hidden"> >
{favorite ? ( <span className="group-hover/toggle:hidden">
<MdFavorite size={iconSize} /> {favorite ? (
) : ( <MdFavorite size={iconSize} />
<MdFavoriteBorder size={iconSize} /> ) : (
)} <MdFavoriteBorder size={iconSize} />
</span> )}
<span className="hidden group-hover/toggle:block"> </span>
{favorite ? ( <span className="hidden group-hover/toggle:block">
<MdFavoriteBorder size={iconSize} /> {favorite ? (
) : ( <MdFavoriteBorder size={iconSize} />
<MdFavorite size={iconSize} /> ) : (
)} <MdFavorite size={iconSize} />
</span> )}
</button> </span>
</button>
)}
<button <button
className={`${buttonClass} text-red-500`} className={`${buttonClass} text-red-500`}
@ -153,16 +157,17 @@ export const MovieCard: FC<Props> = ({
</span> </span>
</figure> </figure>
<div className="p-4"> <div className="p-4">
{!!vote_average && (
<p className="flex items-center gap-1 text-sm mb-2">
<span className="text-yellow-400">★</span>
<span>{vote_average.toFixed(1)}/10</span>
</p>
)}
<div className="flex justify-between"> <div className="flex justify-between">
<h2 className="text-xl leading-[1.1] font-bold">{title}</h2> <h2 className="text-xl leading-[1.1] font-bold">{title}</h2>
{!!vote_average && (
<p className="flex items-center gap-1 text-sm">
<span className="text-yellow-400">★</span>
<span>{vote_average.toFixed(1)}/10</span>
</p>
)}
</div> </div>
<p <p
className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${ className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${
isReleased ? "text-green-700" : "text-yellow-500" isReleased ? "text-green-700" : "text-yellow-500"

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

@ -237,7 +237,7 @@ export const Hero: FC<Props> = ({
className={`w-3 h-3 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${ className={`w-3 h-3 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
index === currentIndex index === currentIndex
? "bg-secondary scale-125" ? "bg-secondary scale-125"
: "bg-secondary/50 hover:bg-secondary/70" : "bg-white/50 hover:bg-secondary/70"
}`} }`}
/> />
))} ))}

13
src/lib/tmdb/server.ts
View File

@ -27,6 +27,7 @@ export async function search(options: SearchOptions): Promise<SearchResult> {
const params = new URLSearchParams(); const params = new URLSearchParams();
options.language = "pl-PL"; options.language = "pl-PL";
options.region = "PL";
Object.entries(options).forEach(([key, value]) => { Object.entries(options).forEach(([key, value]) => {
if (value) { if (value) {
@ -47,10 +48,14 @@ export async function getTrendingMovies(): Promise<SearchResult> {
return await fetchTmbd("/trending/movie/day?language=pl-PL"); return await fetchTmbd("/trending/movie/day?language=pl-PL");
} }
export async function getUpcomingMovies(): Promise<SearchResult> { export async function getNowPlayingMovies(
return await fetchTmbd("/movie/upcoming?language=pl-PL"); page: number = 1
): Promise<SearchResult> {
return await fetchTmbd(
`/movie/now_playing?language=pl-PL&region=PL&page=${page}`
);
} }
export async function getNowPlayingMovies(): Promise<SearchResult> { export async function getUpcomingMovies(): Promise<SearchResult> {
return await fetchTmbd("/movie/now_playing?language=pl-PL&region=PL"); return await fetchTmbd("/movie/upcoming?language=pl-PL&region=PL");
} }