Feat/show trending

.env.example

@@ -1 +1 @@
-TMDB_API_KEY=
+TMDB_API_TOKEN=

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<Movie[]>(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 (
 		<>
 			<Navbar />
+			<div className="grid lg:grid-cols-8 grid-cols-2 gap-5  mx-auto px-5 mt-5">
+				{movies?.map((movie: Movie) => (
+					<CardItem movie={movie} key={movie.id} />
+				))}
+			</div>
 		</>
 	);
 }

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 (
+		<article
+			title={movieTitle}
+			className="hover:scale-105 group transition-transform rounded-lg pb-2 relative bg-gray-900 w-auto overflow-hidden"
+		>
+			<div className="z-30 p-2 text-white absolute hidden group-hover:grid grid-cols-1 bg-black/50 backdrop-blur-sm w-full h-full">
+				<h1 className="pb-2 text-xl font-bold">{movieTitle}</h1>
+				<p className="line-clamp-6">{movie.overview}</p>
+				<Button className="mt-3 w-full self-end mb-4">View</Button>
+			</div>
+			<div className="relative">
+				<img
+					src={"https://image.tmdb.org/t/p/w300/" + movie.poster_path}
+					alt={movieTitle}
+				/>
+				<div className="absolute bottom-1 left-1 flex gap-2">
+					<span className="rounded-md  py-1 px-2 text-sm  bg-gray-500 capitalize text-white ">
+						{movie.media_type}
+					</span>
+					{movie.adult && (
+						<span className="rounded-md  py-1 px-2 text-sm  bg-red-500 capitalize text-white ">
+							Mature
+						</span>
+					)}
+				</div>
+			</div>
+
+			<p className="text-lg md:text-xl font-bold text-white px-3 py-2">
+				{movieTitle}
+			</p>
+
+			<p className="px-3 md:2xl text-white place-self-end">{getYear()}</p>
+		</article>
+	);
+}

src/components/Navbar.tsx

@@ -5,13 +5,13 @@ export default function Navbar() {
 				<div className="logo">
 					<h1 className="text-2xl md:text-4xl font-bold">Vilm</h1>
 				</div>
-				<div className="nav flex">
+				<div className="flex">
 					<input
 						type="search"
-						className="rounded-md p-2 md:w-96   focus:outline-none focus:ring-2  focus:ring-gray-700 focus:border-transparent"
+						className="rounded-md p-2 md:w-96 focus:outline-none focus:ring-2  focus:ring-gray-700 focus:border-transparent"
 						v-model="query"
 						aria-label="Search"
-						placeholder="search movies and tv shows"
+						placeholder="Search movies and tv shows"
 						style={{ backgroundColor: "#c4c4c430" }}
 					/>
 				</div>