From 289b9984e488c4ca711c8d341bab83aeacf6048a Mon Sep 17 00:00:00 2001
From: Dev Chauhan <124146292+DevChauhan5@users.noreply.github.com>
Date: Sun, 30 Jul 2023 15:47:56 +0000
Subject: [PATCH] done

---
 .gitignore                   |  1 +
 package-lock.json            | 11 +++++++-
 package.json                 |  3 ++-
 src/App.jsx                  | 49 +++++++++++++++++++++++++++++++++---
 src/components/MovieCard.jsx | 30 ++++++++++++++++++++++
 5 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 src/components/MovieCard.jsx

diff --git a/.gitignore b/.gitignore
index a547bf3..d7d77c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.env
 
 # Editor directories and files
 .vscode/*
diff --git a/package-lock.json b/package-lock.json
index e8936a8..da6ea59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.10.1"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -3397,6 +3398,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
+      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 70ce1d1..e63dd89 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.10.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/src/App.jsx b/src/App.jsx
index 3455dc7..c1979d5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,50 @@
-import React from 'react'
+import React, { useState, useEffect } from "react";
+import { HiOutlineSearch } from "react-icons/hi";
+import MovieCard from "./components/MovieCard";
 
 function App() {
+  const [movies, setMovies] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('')
+  const api = import.meta.env.VITE_API_KEY;
+
+  const getMovie = (searchTerm) => {
+    const url = `https://api.themoviedb.org/3/search/movie?api_key=${api}&query=${searchTerm}`;
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setMovies(data.results);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+      });
+  };
+  useEffect(() => {
+    getMovie(searchTerm || "Avengers");
+  }, [searchTerm]);
   return (
-    <div>App</div>
-  )
+    <div className="flex flex-col items-center justify-center p-4">
+      <div className="border-2 border-black p-2 rounded-2xl flex items-center justify-between w-full relative">
+        <input
+          className="w-full h-full outline-none p-1"
+          type="text"
+          placeholder="Search Movies..."
+          value={searchTerm}
+          onChange={(e)=>setSearchTerm(e.target.value)}
+        />
+        <HiOutlineSearch className="cursor-pointer font-bold text-2xl"/>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+        {movies.map((movie, index) => (
+          <MovieCard key={index} movie={movie} />
+        ))}
+      </div>
+    </div>
+  );
 }
 
-export default App
\ No newline at end of file
+export default App;
diff --git a/src/components/MovieCard.jsx b/src/components/MovieCard.jsx
new file mode 100644
index 0000000..a3eea80
--- /dev/null
+++ b/src/components/MovieCard.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+function MovieCard({ movie }) {
+  return (
+    <div>
+      <div className="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
+        <img
+          src={
+            movie.backdrop_path
+              ? `https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`
+              : "https://placehold.co/600x400/000000/FFFFFF/png"
+          }
+          alt={movie.title}
+          className="h-40 w-full object-cover"
+        />
+        <div className="p-4">
+          <h1 className="font-bold text-lg text-black">{movie.title}</h1>
+          <p className="text-gray-600 text-sm mt-1">
+            Release Date: {movie.release_date}
+          </p>
+          <p className="text-gray-600 text-sm mt-2 line-clamp-3">
+            {movie.overview}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MovieCard;