Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 6x 4x 4x | import useMovieToolbar from "@/hooks/useMovieToolbar";
import Tooltip from "@mui/material/Tooltip";
import FavoriteIcon from "@mui/icons-material/Favorite";
import BookmarkIcon from "@mui/icons-material/Bookmark";
import StarRateIcon from "@mui/icons-material/StarRate";
import { CircularProgress, Rating } from "@mui/material";
export const MovieToolbar = ({ movieId }: { movieId: number }) => {
const {
accentColor,
isFavorite,
isInWatchlist,
isRated,
addingFavoriteLoading,
addingWatchListLoading,
rating,
showRating,
handleSetMovieToFavorite,
handleSetMovieToWatchList,
handleMovieRating,
onRateMovie,
favoriteTooltip,
watchListTooltip,
rateMovieTooltip,
} = useMovieToolbar(movieId);
return (
<div className="flex justify-center sm:justify-start gap-4 mt-4">
<Tooltip arrow onClick={handleSetMovieToFavorite} title={favoriteTooltip}>
{addingFavoriteLoading ? (
<div className="bg-[#0277bd] rounded-full w-[48px] h-[48px] flex justify-center items-center">
<CircularProgress sx={{ color: "#fff" }} size={30} />
</div>
) : (
<FavoriteIcon
sx={{
background: accentColor,
borderRadius: "50%",
padding: "12px",
width: "48px",
height: "48px",
color: isFavorite ? "#b91c1c" : "#fff",
fontSize: "28px",
}}
/>
)}
</Tooltip>
<Tooltip arrow onClick={handleSetMovieToWatchList} title={watchListTooltip}>
{addingWatchListLoading ? (
<div className="bg-[#0277bd] rounded-full w-[48px] h-[48px] flex justify-center items-center">
<CircularProgress sx={{ color: "#fff" }} size={30} />
</div>
) : (
<BookmarkIcon
sx={{
background: accentColor,
borderRadius: "50%",
padding: "12px",
width: "48px",
height: "48px",
color: isInWatchlist ? "#84cc16" : "#fff",
fontSize: "28px",
}}
/>
)}
</Tooltip>
<Tooltip arrow onClick={onRateMovie} title={rateMovieTooltip}>
<StarRateIcon
sx={{
background: accentColor,
borderRadius: "50%",
padding: "12px",
width: "48px",
height: "48px",
color: isRated ? "#fbbf24" : "#fff",
fontSize: "28px",
}}
/>
</Tooltip>
{showRating && (
<div className="bg-white px-4 flex items-center rounded-md">
<Rating
data-testid="rating-movie-component"
precision={0.5}
name="movie-rating"
value={rating}
onChange={(e, newValue) => handleMovieRating(newValue)}
/>
</div>
)}
</div>
);
};
|