diff --git a/.env.example b/.env.example index 4524d83..2839811 100644 --- a/.env.example +++ b/.env.example @@ -1 +1 @@ -TMDB_API_KEY= \ No newline at end of file +TMDB_API_TOKEN= \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index b6762bb..fdf552c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,39 @@ +import { useEffect, useState } from "react"; import "./App.css"; import Navbar from "./components/Navbar"; +import { Response, Movie } from "./types/response"; +import CardItem from "./components/CardItem"; +import { default as dataMovies } from "./data/movies"; function App() { + const [movies, setMovies] = useState(dataMovies); + const API_TOKEN = import.meta.env.VITE_TMDB_API_TOKEN; + + useEffect(() => { + // const fetchMovies = async () => { + // const response = await fetch( + // "https://api.themoviedb.org/3/trending/all/day", + // { + // headers: { + // Authorization: "Bearer " + API_TOKEN, + // }, + // } + // ); + // const data: Response = await response.json(); + // setMovies(data.results); + // }; + // fetchMovies(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( <> +
+ {movies?.map((movie: Movie) => ( + + ))} +
); } diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx new file mode 100644 index 0000000..78021af --- /dev/null +++ b/src/components/CardItem.tsx @@ -0,0 +1,48 @@ +import { Movie } from "@/types/response"; +import { Button } from "./ui/button"; + +interface CardItemProps { + movie: Movie; +} +export default function CardItem({ movie }: CardItemProps) { + const movieTitle = movie.title ?? movie.name; + const getYear = () => { + const date = movie.release_date ?? movie.first_air_date; + return date?.split("-")[0] ?? ""; + }; + + return ( +
+
+

{movieTitle}

+

{movie.overview}

+ +
+
+ {movieTitle} +
+ + {movie.media_type} + + {movie.adult && ( + + Mature + + )} +
+
+ +

+ {movieTitle} +

+ +

{getYear()}

+
+ ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 69f5a42..51822ce 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -5,13 +5,13 @@ export default function Navbar() {

Vilm

-
+
diff --git a/src/data/movies.ts b/src/data/movies.ts new file mode 100644 index 0000000..aef6a82 --- /dev/null +++ b/src/data/movies.ts @@ -0,0 +1,364 @@ +const movies = [ + { + adult: false, + backdrop_path: "/pwGmXVKUgKN13psUjlhC9zBcq1o.jpg", + id: 634492, + title: "Madame Web", + original_language: "en", + original_title: "Madame Web", + overview: + "Forced to confront revelations about her past, paramedic Cassandra Webb forges a relationship with three young women destined for powerful futures...if they can all survive a deadly present.", + poster_path: "/rULWuutDcN5NvtiZi4FRPzRYWSh.jpg", + media_type: "movie", + genre_ids: [28, 14], + popularity: 833.965, + release_date: "2024-02-14", + video: false, + vote_average: 5.414, + vote_count: 519, + }, + { + adult: false, + backdrop_path: "/9Le7N3fmrHnWwdxCg35jSSawFyK.jpg", + id: 693134, + title: "Dune: Part Two", + original_language: "en", + original_title: "Dune: Part Two", + overview: + "Follow the mythic journey of Paul Atreides as he unites with Chani and the Fremen while on a path of revenge against the conspirators who destroyed his family. Facing a choice between the love of his life and the fate of the known universe, Paul endeavors to prevent a terrible future only he can foresee.", + poster_path: "/czembW0Rk1Ke7lCJGahbOhdCuhV.jpg", + media_type: "movie", + genre_ids: [878, 12], + popularity: 1105.744, + release_date: "2024-02-27", + video: false, + vote_average: 8.4, + vote_count: 1833, + }, + { + adult: false, + backdrop_path: "/qz2QzkYzesbbL94rdUpZrFPhlRe.jpg", + id: 1019420, + title: "Irish Wish", + original_language: "en", + original_title: "Irish Wish", + overview: + "Maddie's dream guy is days away from marrying her best friend when a wish for true love made on an ancient stone in Ireland magically alters her fate.", + poster_path: "/v4Bb70dpIIQoEnZAHnm3nzCPauU.jpg", + media_type: "movie", + genre_ids: [10749, 35, 14], + popularity: 182.794, + release_date: "2024-03-14", + video: false, + vote_average: 6.07, + vote_count: 79, + }, + { + adult: false, + backdrop_path: "/deLWkOLZmBNkm8p16igfapQyqeq.jpg", + id: 763215, + title: "Damsel", + original_language: "en", + original_title: "Damsel", + overview: + "A young woman's marriage to a charming prince turns into a fierce fight for survival when she's offered up as a sacrifice to a fire-breathing dragon.", + poster_path: "/sMp34cNKjIb18UBOCoAv4DpCxwY.jpg", + media_type: "movie", + genre_ids: [14, 12, 28], + popularity: 2543.57, + release_date: "2024-03-08", + video: false, + vote_average: 7.262, + vote_count: 910, + }, + { + adult: false, + backdrop_path: "/lzWHmYdfeFiMIY4JaMmtR7GEli3.jpg", + id: 438631, + title: "Dune", + original_language: "en", + original_title: "Dune", + overview: + "Paul Atreides, a brilliant and gifted young man born into a great destiny beyond his understanding, must travel to the most dangerous planet in the universe to ensure the future of his family and his people. As malevolent forces explode into conflict over the planet's exclusive supply of the most precious resource in existence-a commodity capable of unlocking humanity's greatest potential-only those who can conquer their fear will survive.", + poster_path: "/d5NXSklXo0qyIYkgV94XAgMIckC.jpg", + media_type: "movie", + genre_ids: [878, 12], + popularity: 605.578, + release_date: "2021-09-15", + video: false, + vote_average: 7.789, + vote_count: 10821, + }, + { + adult: false, + backdrop_path: "/6snBXmgkscLEJQmxx46qEIlqYlB.jpg", + id: 46518, + name: "Masters of the Air", + original_language: "en", + original_name: "Masters of the Air", + overview: + "During World War II, airmen risk their lives with the 100th Bomb Group, a brotherhood forged by courage, loss, and triumph.", + poster_path: "/rSAmgcoA74371rplbqM27yVsd3y.jpg", + media_type: "tv", + genre_ids: [10768, 18], + popularity: 559.135, + first_air_date: "2024-01-25", + vote_average: 7.896, + vote_count: 178, + origin_country: ["US"], + }, + { + adult: false, + backdrop_path: "/gJL5kp5FMopB2sN4WZYnNT5uO0u.jpg", + id: 1011985, + title: "Kung Fu Panda 4", + original_language: "en", + original_title: "Kung Fu Panda 4", + overview: + "Po is gearing up to become the spiritual leader of his Valley of Peace, but also needs someone to take his place as Dragon Warrior. As such, he will train a new kung fu practitioner for the spot and will encounter a villain called the Chameleon who conjures villains from the past.", + poster_path: "/wkfG7DaExmcVsGLR4kLouMwxeT5.jpg", + media_type: "movie", + genre_ids: [28, 12, 16, 35, 10751], + popularity: 5294.537, + release_date: "2024-03-02", + video: false, + vote_average: 6.913, + vote_count: 167, + }, + { + adult: false, + backdrop_path: "/5zmiBoMzeeVdQ62no55JOJMY498.jpg", + id: 126308, + name: "Shōgun", + original_language: "en", + original_name: "Shōgun", + overview: + "In Japan in the year 1600, at the dawn of a century-defining civil war, Lord Yoshii Toranaga is fighting for his life as his enemies on the Council of Regents unite against him, when a mysterious European ship is found marooned in a nearby fishing village.", + poster_path: "/7O4iVfOMQmdCSxhOg1WnzG1AgYT.jpg", + media_type: "tv", + genre_ids: [18, 10768], + popularity: 2319.821, + first_air_date: "2024-02-27", + vote_average: 8.785, + vote_count: 242, + origin_country: ["US"], + }, + { + adult: false, + backdrop_path: "/o6e8Y0Q7RZIWi4qcJq4s5OYOVJs.jpg", + id: 792307, + title: "Poor Things", + original_language: "en", + original_title: "Poor Things", + overview: + "Brought back to life by an unorthodox scientist, a young woman runs off with a debauched lawyer on a whirlwind adventure across the continents. Free from the prejudices of her times, she grows steadfast in her purpose to stand for equality and liberation.", + poster_path: "/kCGlIMHnOm8JPXq3rXM6c5wMxcT.jpg", + media_type: "movie", + genre_ids: [878, 10749, 35], + popularity: 960.54, + release_date: "2023-12-07", + video: false, + vote_average: 7.867, + vote_count: 2432, + }, + { + adult: false, + backdrop_path: "/nb3xI8XI3w4pMVZ38VijbsyBqP4.jpg", + id: 872585, + title: "Oppenheimer", + original_language: "en", + original_title: "Oppenheimer", + overview: + "The story of J. Robert Oppenheimer's role in the development of the atomic bomb during World War II.", + poster_path: "/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg", + media_type: "movie", + genre_ids: [18, 36], + popularity: 698.282, + release_date: "2023-07-19", + video: false, + vote_average: 8.113, + vote_count: 7233, + }, + { + adult: false, + backdrop_path: "/4W9kyBFT69ORP5Jzk9mVMGBBO4R.jpg", + id: 206586, + name: "The Walking Dead: The Ones Who Live", + original_language: "en", + original_name: "The Walking Dead: The Ones Who Live", + overview: + "The love story of Rick Grimes and Michonne is changed by a changed world. Kept apart by distance. By an unstoppable power. Can they find each other and who they were in a situation unlike any they've ever known?", + poster_path: "/ywbacot78IuNhGW4uVZPxxxVTkm.jpg", + media_type: "tv", + genre_ids: [10765, 18], + popularity: 2257.655, + first_air_date: "2024-02-25", + vote_average: 8.3, + vote_count: 184, + origin_country: ["US"], + }, + { + adult: false, + backdrop_path: "/x3XEQ3Wey8enS7mMjo3eUJp8Myi.jpg", + id: 155533, + name: "Manhunt", + original_language: "en", + original_name: "Manhunt", + overview: + "A conspiracy thriller about one of the best known but least understood crimes in history. This is the astonishing story of the hunt for John Wilkes Booth in the aftermath of Abraham Lincoln's assassination—as the fate of the country hangs in the balance.", + poster_path: "/pN5qeqDgCG1Pij7KaEBKLkyjn4A.jpg", + media_type: "tv", + genre_ids: [18, 80], + popularity: 209.558, + first_air_date: "2024-03-14", + vote_average: 8.111, + vote_count: 9, + origin_country: ["US"], + }, + { + adult: false, + backdrop_path: "/zW0v2YT74C6tRafzqqBkfSqLAN0.jpg", + id: 52814, + name: "Halo", + original_language: "en", + original_name: "Halo", + overview: + "Depicting an epic 26th-century conflict between humanity and an alien threat known as the Covenant, the series weaves deeply drawn personal stories with action, adventure and a richly imagined vision of the future.", + poster_path: "/hmHA5jqxN3ESIAGx0jAwV7TJhTQ.jpg", + media_type: "tv", + genre_ids: [10759, 10765], + popularity: 2478.681, + first_air_date: "2022-03-24", + vote_average: 8.335, + vote_count: 2425, + origin_country: ["US"], + }, + { + adult: false, + backdrop_path: "/hQ7TIgjlktohXiHYUtDWwRi1AV2.jpg", + id: 1160164, + title: "TAYLOR SWIFT | THE ERAS TOUR", + original_language: "en", + original_title: "TAYLOR SWIFT | THE ERAS TOUR", + overview: + "The cultural phenomenon continues on the big screen! Immerse yourself in this once-in-a-lifetime concert film experience with a breathtaking, cinematic view of the history-making tour.", + poster_path: "/jf3YO8hOqGHCupsREf5qymYq1n.jpg", + media_type: "movie", + genre_ids: [10402], + popularity: 183.842, + release_date: "2023-10-13", + video: false, + vote_average: 8.372, + vote_count: 288, + }, + { + adult: false, + backdrop_path: "/xvk5AhfhgQcTuaCQyq3XqAnhEma.jpg", + id: 848538, + title: "Argylle", + original_language: "en", + original_title: "Argylle", + overview: + "When the plots of reclusive author Elly Conway's fictional espionage novels begin to mirror the covert actions of a real-life spy organization, quiet evenings at home become a thing of the past. Accompanied by her cat Alfie and Aiden, a cat-allergic spy, Elly races across the world to stay one step ahead of the killers as the line between Conway's fictional world and her real one begins to blur.", + poster_path: "/95VlSEfLMqeX36UVcHJuNlWEpwf.jpg", + media_type: "movie", + genre_ids: [28, 12, 35], + popularity: 1353.29, + release_date: "2024-01-31", + video: false, + vote_average: 6.146, + vote_count: 617, + }, + { + adult: false, + backdrop_path: "/2rmK7mnchw9Xr3XdiTFSxTTLXqv.jpg", + id: 37854, + name: "One Piece", + original_language: "ja", + original_name: "ワンピース", + overview: + 'Years ago, the fearsome Pirate King, Gol D. Roger was executed leaving a huge pile of treasure and the famous "One Piece" behind. Whoever claims the "One Piece" will be named the new King of the Pirates.\n\nMonkey D. Luffy, a boy who consumed a "Devil Fruit," decides to follow in the footsteps of his idol, the pirate Shanks, and find the One Piece. It helps, of course, that his body has the properties of rubber and that he\'s surrounded by a bevy of skilled fighters and thieves to help him along the way.\n\nLuffy will do anything to get the One Piece and become King of the Pirates!', + poster_path: "/cMD9Ygz11zjJzAovURpO75Qg7rT.jpg", + media_type: "tv", + genre_ids: [10759, 35, 16], + popularity: 205.355, + first_air_date: "1999-10-20", + vote_average: 8.727, + vote_count: 4366, + origin_country: ["JP"], + }, + { + adult: false, + backdrop_path: "/y1VDwUT1cZNOOgrCHHwnsIdUhWe.jpg", + id: 1051023, + title: "Murder Mubarak", + original_language: "hi", + original_title: "मर्डर मुबारक", + overview: + "When a gym trainer is murdered at an elite Delhi club, a wily investigator unravels the sordid secrets of its ultrarich members to find the killer.", + poster_path: "/joU5VihgUvkhyPnhzxfjmWk32rd.jpg", + media_type: "movie", + genre_ids: [35, 80, 53], + popularity: 123.372, + release_date: "2024-03-15", + video: false, + vote_average: 5.0, + vote_count: 7, + }, + { + adult: false, + backdrop_path: "/sR0SpCrXamlIkYMdfz83sFn5JS6.jpg", + id: 823464, + title: "Godzilla x Kong: The New Empire", + original_language: "en", + original_title: "Godzilla x Kong: The New Empire", + overview: + "Following their explosive showdown, Godzilla and Kong must reunite against a colossal undiscovered threat hidden within our world, challenging their very existence – and our own.", + poster_path: "/tMefBSflR6PGQLv7WvFPpKLZkyk.jpg", + media_type: "movie", + genre_ids: [28, 878, 12], + popularity: 544.333, + release_date: "2024-03-27", + video: false, + vote_average: 0.0, + vote_count: 0, + }, + { + adult: false, + backdrop_path: "/ydf1CeiBLfdxiyNTpskM0802TKl.jpg", + id: 12971, + name: "Dragon Ball Z", + original_language: "ja", + original_name: "ドラゴンボールゼット", + overview: + "The adventures of Earth's martial arts defender, Son Goku, continue with a new family and the revelation of his alien origins. Now Goku and his allies must defend the planet from an onslaught of new extraterrestrial enemies.", + poster_path: "/dBsDWUcdfbuZwglgyeeQ9ChRoS4.jpg", + media_type: "tv", + genre_ids: [16, 10765, 10759], + popularity: 511.591, + first_air_date: "1989-04-26", + vote_average: 8.325, + vote_count: 4253, + origin_country: ["JP"], + }, + { + adult: false, + backdrop_path: "/9JNsAIFMu4o37AgnU1JVtR6AWsK.jpg", + id: 1248795, + title: "Art of Love", + original_language: "tr", + original_title: "Romantik Hırsız", + overview: + "After learning that the art thief she has been chasing is her ex-lover, an officer working for Interpol concocts a plan to catch him red-handed.", + poster_path: "/niVtvS9Kf8G1VDPSqurqHkaSSwm.jpg", + media_type: "movie", + genre_ids: [10749, 28, 18], + popularity: 195.618, + release_date: "2024-03-14", + video: false, + vote_average: 7.167, + vote_count: 39, + }, +]; + +export default movies; diff --git a/src/index.css b/src/index.css index 6a75725..112b98a 100644 --- a/src/index.css +++ b/src/index.css @@ -73,4 +73,7 @@ body { @apply bg-background text-foreground; } +} +body { + @apply bg-gray-800; } \ No newline at end of file diff --git a/src/types/response.ts b/src/types/response.ts new file mode 100644 index 0000000..a14ea6d --- /dev/null +++ b/src/types/response.ts @@ -0,0 +1,28 @@ +export interface Response { + page: number; + results: Movie[]; + total_pages: number; + total_results: number; +} + +export interface Movie { + adult: boolean; + backdrop_path: string; + id: number; + title?: string; + original_language: string; + original_title?: string; + overview: string; + poster_path: string; + media_type: string; + genre_ids: number[]; + popularity: number; + release_date?: string; + video?: boolean; + vote_average: number; + vote_count: number; + name?: string; + original_name?: string; + first_air_date?: string; + origin_country?: string[]; +}