-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bb12538
commit 18e3c0c
Showing
2 changed files
with
190 additions
and
198 deletions.
There are no files selected for viewing
157 changes: 68 additions & 89 deletions
157
client/src/components/custom/MovieCarousel/CarouselCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,111 +1,90 @@ | ||
| import { genreMap } from "@/lib/stats" | ||
| import { SimpleMovie } from "@/Types/Movie" | ||
| import { FC } from "react" | ||
| import { useNavigate } from "react-router-dom" | ||
| import LazyImage from "../LazyLoadImage/LazyImage" | ||
| import "./CarouselCard.css" | ||
| // export interface SimpleMovie { | ||
| // movie_id: string // movie movie_id | ||
| // release_date: string | ||
| // friend?: string | ||
| // title: string | undefined | ||
| // overview: string | ||
| // poster_path: string | undefined | ||
| // backdrop_path: string | ||
| // } | ||
| import React from "react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { motion } from "framer-motion"; | ||
| import { ChevronRight, Calendar, Film, User } from "lucide-react"; | ||
| import { genreMap } from "@/lib/stats"; | ||
| import { SimpleMovie } from "@/Types/Movie"; | ||
| import LazyImage from "../LazyLoadImage/LazyImage"; | ||
|
|
||
| const image_url = "https://image.tmdb.org/t/p" | ||
| const IMAGE_URL = "https://image.tmdb.org/t/p"; | ||
|
|
||
| const CarouselCard: FC<SimpleMovie> = ({ | ||
| const CarouselCard: React.FC<SimpleMovie> = ({ | ||
| movie_id, | ||
| friend, | ||
| title, | ||
|
|
||
| poster_path, | ||
| backdrop_path, | ||
| release_date, | ||
| genre_ids, | ||
| }) => { | ||
| const navigate = useNavigate(); | ||
| const genreNames = genre_ids | ||
| ?.map((id) => genreMap[id]) // map genre_ids to their respective names | ||
| .filter(Boolean) // remove undefined genres in case there are any missing ids | ||
| .slice(0, 3) // | ||
| const navigate = useNavigate() | ||
| ?.map((id) => genreMap[id]) | ||
| .filter(Boolean) | ||
| .slice(0, 3); | ||
|
|
||
| const handleClick = () => { | ||
| console.log("movie_id :", movie_id) | ||
| navigate(`/movie/${movie_id}`) | ||
| } | ||
| console.log("movie_id:", movie_id); | ||
| navigate(`/movie/${movie_id}`); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| <motion.div | ||
| id={movie_id} | ||
| className="roboto-regular carousel-item relative w-full h-[300px] bg-cover bg-center rounded-lg overflow-hidden" | ||
| className="carousel-item relative w-full h-[500px] bg-cover bg-center rounded-lg overflow-hidden cursor-pointer" | ||
| style={{ | ||
| backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1)), url(${image_url}/w1280${backdrop_path})`, | ||
| backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.9) 100%), url(${IMAGE_URL}/w1280${backdrop_path})`, | ||
| }} | ||
| onClick={handleClick} | ||
| whileHover={{ scale: 1.02 }} | ||
| transition={{ duration: 0.3 }} | ||
| > | ||
| <div | ||
| className="absolute inset-0 bg-black bg-opacity-50 blur-sm" | ||
| style={{ | ||
| backdropFilter: "blur(5px)", | ||
| }} | ||
| ></div> | ||
| <div className="absolute inset-0 flex items-center p-6 rounded-md"> | ||
| {/* Poster Image */} | ||
| <LazyImage | ||
| src={`${image_url}/w300${poster_path}`} | ||
| alt={title || "Movie Poster"} | ||
| className="w-[150px] h-auto rounded-lg shadow-lg z-10" | ||
| /> | ||
| {/* Movie Details */} | ||
| <div className="ml-6 text-white z-10"> | ||
| <h2 className="text-3xl font-bold font-heading">{title}</h2> | ||
| <div className="mt-4 flex space-x-4"> | ||
| <button className="btn btn-sm glass text-sm "> | ||
| {release_date} | ||
| </button> | ||
| {/* <button className="btn btn-sm glass text-sm lg:w-fit overflow-hidden"> | ||
| <span className="lg:visible hidden "> Genre:</span>{" "} | ||
| {genre} | ||
| </button> */} | ||
| <button className="btn btn-sm glass text-sm lg:w-fit overflow-hidden"> | ||
| <span className="lg:visible hidden">Genres:</span> | ||
| {/* Display the genre names */} | ||
| {genreNames?.join(", ")} | ||
| </button> | ||
| </div> | ||
| {/* //animate presence used to animate things which are entering | ||
| and leaving the viewport */} | ||
| {/* <AnimatePresence> | ||
| {isHovered && ( | ||
| <motion.p | ||
| className="mt-4 text-lg max-w-3xl h-[120px] overflow-auto scrollbar-hide " | ||
| initial={{ opacity: 0, y: 10 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| exit={{ opacity: 0, y: 10 }} | ||
| transition={{ | ||
| duration: 0.4, | ||
| ease: "easeInOut", | ||
| }} | ||
| > | ||
| {overview} | ||
| </motion.p> | ||
| <div className="absolute inset-0 bg-black bg-opacity-30 backdrop-blur-sm" /> | ||
| <div className="absolute inset-0 flex items-center p-8"> | ||
| <motion.div | ||
| className="flex flex-col md:flex-row items-start md:items-center gap-6 z-10" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5 }} | ||
| > | ||
| <LazyImage | ||
| src={`${IMAGE_URL}/w300${poster_path}`} | ||
| alt={title || "Movie Poster"} | ||
| className="w-[250px] h-auto rounded-lg shadow-2xl" | ||
| /> | ||
| <div className="text-white"> | ||
| <h2 className="text-4xl font-bold mb-4 leading-tight">{title}</h2> | ||
| <div className="flex flex-wrap gap-4 mb-4"> | ||
| <div className="flex items-center"> | ||
| <Calendar className="w-4 h-4 mr-2" /> | ||
| <span className="text-sm">{release_date}</span> | ||
| </div> | ||
| <div className="flex items-center"> | ||
| <Film className="w-4 h-4 mr-2" /> | ||
| <span className="text-sm">{genreNames?.join(", ")}</span> | ||
| </div> | ||
| </div> | ||
| {friend && ( | ||
| <div className="flex items-center mt-2"> | ||
| <User className="w-4 h-4 mr-2" /> | ||
| <span className="text-sm"> | ||
| Watched by <span className="font-semibold text-red-400">{friend}</span> | ||
| </span> | ||
| </div> | ||
| )} | ||
| </AnimatePresence> */} | ||
| {/* Release Date and Genre */} | ||
| {friend && ( | ||
| <p className="mt-4 text-sm"> | ||
| Watched by{" "} | ||
| <span className="btn btn-sm glass text-red-400 font-semibold"> | ||
| {friend} | ||
| </span> | ||
| </p> | ||
| )} | ||
| </div> | ||
| <motion.button | ||
| className="mt-6 px-6 py-2 bg-red-600 text-white rounded-full flex items-center hover:bg-red-700 transition-colors" | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.95 }} | ||
| > | ||
| View Details | ||
| <ChevronRight className="w-4 h-4 ml-2" /> | ||
| </motion.button> | ||
| </div> | ||
| </motion.div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CarouselCard | ||
| export default CarouselCard; |
Oops, something went wrong.