gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions 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.

Browse Source
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
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 & {
layout?: "default" | "zeus";
showDayCounter?: boolean;
simpleToggle?: boolean;
};
const buttonClass =
@@ -21,6 +22,7 @@ const buttonClass =
export const MovieCard: FC<Props> = ({
layout = "default",
showDayCounter = true,
simpleToggle = false,
...movie
}) => {
const {
@@ -93,7 +95,7 @@ export const MovieCard: FC<Props> = ({
{alreadyInStore && (
<div className="flex flex-col">
<>
{isReleased && (
{isReleased && !simpleToggle && (
<button
className={`${buttonClass} text-white`}
onClick={handleSeen}
@@ -115,25 +117,27 @@ export const MovieCard: FC<Props> = ({
</button>
)}
<button
className={`${buttonClass} text-amber-400`}
onClick={handleFavorite}
>
<span className="group-hover/toggle:hidden">
{favorite ? (
<MdFavorite size={iconSize} />
) : (
<MdFavoriteBorder size={iconSize} />
)}
</span>
<span className="hidden group-hover/toggle:block">
{favorite ? (
<MdFavoriteBorder size={iconSize} />
) : (
<MdFavorite size={iconSize} />
)}
</span>
</button>
{!simpleToggle && (
<button
className={`${buttonClass} text-amber-400`}
onClick={handleFavorite}
>
<span className="group-hover/toggle:hidden">
{favorite ? (
<MdFavorite size={iconSize} />
) : (
<MdFavoriteBorder size={iconSize} />
)}
</span>
<span className="hidden group-hover/toggle:block">
{favorite ? (
<MdFavoriteBorder size={iconSize} />
) : (
<MdFavorite size={iconSize} />
)}
</span>
</button>
)}
<button
className={`${buttonClass} text-red-500`}
@@ -153,16 +157,17 @@ export const MovieCard: FC<Props> = ({
</span>
</figure>
<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">
<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>
<p
className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${
isReleased ? "text-green-700" : "text-yellow-500"