From c5b3f040a6045d5ee0e1213986e7e98b60e342d2 Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 13:23:25 +0700 Subject: [PATCH 1/7] wip: show trending --- .env.example | 2 +- src/App.tsx | 28 ++++++++++++++++++++++++++++ src/types/response.ts | 28 ++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/types/response.ts 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..5ad6018 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,38 @@ +import { useEffect, useState } from "react"; import "./App.css"; import Navbar from "./components/Navbar"; +import { Response, Movie } from "./types/response"; function App() { + const [movies, setMovies] = useState(); + 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(); + console.log(data); + setMovies(data.results); + }; + + fetchMovies(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( <> + + {movies?.map((movie: Movie) => ( +

{movie.title}

+ ))} ); } 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[]; +} From ba4dba0cfd5684d470e468a11790e63437b4015b Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 14:06:03 +0700 Subject: [PATCH 2/7] wip: card item --- src/App.tsx | 401 ++++++++++++++++++++++++++++++++++-- src/components/CardItem.tsx | 24 +++ src/index.css | 3 + 3 files changed, 408 insertions(+), 20 deletions(-) create mode 100644 src/components/CardItem.tsx diff --git a/src/App.tsx b/src/App.tsx index 5ad6018..c89c47c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,37 +2,398 @@ import { useEffect, useState } from "react"; import "./App.css"; import Navbar from "./components/Navbar"; import { Response, Movie } from "./types/response"; +import CardItem from "./components/CardItem"; function App() { - const [movies, setMovies] = useState(); + const [movies, setMovies] = useState([ + { + 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, + }, + ]); 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(); - console.log(data); - setMovies(data.results); - }; - - fetchMovies(); + // 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) => ( -

{movie.title}

- ))} +
+ {movies?.map((movie: Movie) => ( + + ))} +
); } diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx new file mode 100644 index 0000000..6d62475 --- /dev/null +++ b/src/components/CardItem.tsx @@ -0,0 +1,24 @@ +import { Movie } from "@/types/response"; + +interface CardItemProps { + movie: Movie; +} +export default function CardItem({ movie }: CardItemProps) { + const movieTitle = movie.title ?? movie.name; + return ( +
+ {movieTitle} + +

+ {movieTitle} +

+ +

+ {movie.release_date ?? movie.first_air_date} +

+
+ ); +} 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 From 92cf756ad2f8a27456997e03c53975c465699298 Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 14:31:13 +0700 Subject: [PATCH 3/7] fix: transition --- src/App.tsx | 2 +- src/components/CardItem.tsx | 13 +++++++++---- src/components/Navbar.tsx | 6 +++--- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c89c47c..d51ebf7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -389,7 +389,7 @@ function App() { return ( <> -
+
{movies?.map((movie: Movie) => ( ))} diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx index 6d62475..e249082 100644 --- a/src/components/CardItem.tsx +++ b/src/components/CardItem.tsx @@ -5,8 +5,15 @@ interface CardItemProps { } 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.release_date ?? movie.first_air_date} -

+

{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

-
+
From e20cf0c209cae56d0049a81438bdad026323b18d Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 14:37:25 +0700 Subject: [PATCH 4/7] refactor: data movies --- src/App.tsx | 364 +-------------------------------------------- src/data/movies.ts | 364 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 366 insertions(+), 362 deletions(-) create mode 100644 src/data/movies.ts diff --git a/src/App.tsx b/src/App.tsx index d51ebf7..2599923 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,370 +3,10 @@ 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([ - { - 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, - }, - ]); + const [movies, setMovies] = useState(dataMovies); const API_TOKEN = import.meta.env.VITE_TMDB_API_TOKEN; useEffect(() => { 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; From e010f5b67578abcf8333d5eb6aa3447d34c6a896 Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 14:59:19 +0700 Subject: [PATCH 5/7] fix: responsive --- src/App.tsx | 2 +- src/components/CardItem.tsx | 29 +++++++++++++++++++++-------- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 2599923..6a5cb02 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,7 +29,7 @@ function App() { return ( <> -
+
{movies?.map((movie: Movie) => ( ))} diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx index e249082..68a0683 100644 --- a/src/components/CardItem.tsx +++ b/src/components/CardItem.tsx @@ -7,23 +7,36 @@ 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 date?.split("-")[0] ?? ""; }; + return (
- {movieTitle} +
+ {movieTitle} +
+ + {movie.media_type} + + {movie.adult && ( + + Mature + + )} +
+
-

+

{movieTitle}

-

{getYear()}

+

{getYear()}

); } From d08f33dabda8aeefb820b38599b10b2f84e05fbc Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 15:23:53 +0700 Subject: [PATCH 6/7] feat: backdrop card --- src/App.tsx | 2 +- src/components/CardItem.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6a5cb02..fdf552c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,7 +29,7 @@ function App() { return ( <> -
+
{movies?.map((movie: Movie) => ( ))} diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx index 68a0683..6aeaf58 100644 --- a/src/components/CardItem.tsx +++ b/src/components/CardItem.tsx @@ -1,4 +1,5 @@ import { Movie } from "@/types/response"; +import { Button } from "./ui/button"; interface CardItemProps { movie: Movie; @@ -13,11 +14,16 @@ export default function CardItem({ movie }: CardItemProps) { return (
+
+

{movieTitle}

+

{movie.overview}

+ +
{movieTitle}
From 57eb165febf1326346cc8cbcf48232676c1cab15 Mon Sep 17 00:00:00 2001 From: nnivxix Date: Tue, 19 Mar 2024 15:46:10 +0700 Subject: [PATCH 7/7] feat: add hover detail --- src/components/CardItem.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx index 6aeaf58..78021af 100644 --- a/src/components/CardItem.tsx +++ b/src/components/CardItem.tsx @@ -12,14 +12,14 @@ export default function CardItem({ movie }: CardItemProps) { }; return ( -
-
+

{movieTitle}

-

{movie.overview}

- +

{movie.overview}

+

{getYear()}

-
+ ); }