+ 
+
+
+ PEACEPIECE
+
+
+
+
+ scv7282@gmail.com
+
+
+
+
+ +82-10-1234-5678
+
+
+ )
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 00000000..f9b9ff8d
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function Footer() {
+ return (
+
+ )
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 00000000..dcd5a630
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+export default function NavBar() {
+ return (
+ Application Error
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Moive Not Found! Please check the spell +
+ ) + } + return ( +-
+ {movies &&
+ movies.pages.map((page) =>
+ page.map((movie) => (
+
-
+
+
{ + e.target.onerror = null + e.target.src = '/noImage.png' + }} + className={`inline-block scale-100 w-[133px] h-[200px] md:w-[200px] md:h-[300px] object-cover hover:scale-[1.02] + transition duration-150 ease-out rounded-t-sm`} + /> +
++ +{movie.Year}
+{movie.Title}
+
+ )),
+ )}
+
+
+
+ )
+}
+
+Spinner.defaultProps = {
+ pos: '',
+}
+
+Spinner.propTypes = {
+ pos: PropTypes.string,
+}
diff --git a/src/constants/index.js b/src/constants/index.js
new file mode 100644
index 00000000..0b2ae91f
--- /dev/null
+++ b/src/constants/index.js
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const MIN_YEAR = 1985
diff --git a/src/context/movieContext.js b/src/context/movieContext.js
new file mode 100644
index 00000000..eb8473cb
--- /dev/null
+++ b/src/context/movieContext.js
@@ -0,0 +1,36 @@
+import React, { createContext, useContext } from 'react'
+import PropTypes from 'prop-types'
+
+const MovieContext = createContext(null)
+
+export function MovieProvider({ children, data }) {
+ return
+ {children}
+
+
+
+ )
+}
+
+Layout.propTypes = {
+ children: PropTypes.node.isRequired,
+}
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
new file mode 100644
index 00000000..32d41ad7
--- /dev/null
+++ b/src/pages/About.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+
+import Layout from '../layouts/Layout'
+
+export default function About() {
+ return (
+ Empty plz check the movie
+ }
+ return (
+
+
+
+
+ 
{
+ e.target.src = '/noImage.png'
+ }}
+ className="inline-block max-h-[820px] rounded-2xl"
+ />
+
+
+
+
+ {movie.Title}
+
+
+
+ {movie.Released}
+ {movie.Runtime}
+ {movie.Country}
+
+ {movie.Plot}
+
+
+ Ratings
+-
+ {movie.Ratings.map((rating) => (
+
-
+
+
{ + e.target.src = '/noImage.png' + }} + /> + + {rating.Value} +
+ ))}
+
+
+ Actor
+{movie.Actors}
+
+
+ Director
+{movie.Director}
+
+
+ Production
+{movie.Production}
+
+
+ Genre
+{movie.Genre}
+ +
OMDb API
+THE OPEN MOVIE DATABASE
+ +
+
+ + The OMDb API is a RESTful web service to obtain movie information, all content and images on the site are + contributed and maintained by our users. +
++ If you find this service useful, please consider making a one-time donation or become a patron. +
+Search List
+
+ {isLoading &&
+ + Search for the movie title +
+ )} + {isFetchingNextPage &&