diff --git a/index.html b/index.html
index e4b78ea..e0d1c84 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/App.tsx b/src/App.tsx
index 662b925..8fd804a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,49 +1,62 @@
import { useEffect, useState } from 'react'
import './App.css'
import q from 'qjuul'
+import { PaginationButton } from './components'
function App() {
const API_MOVIE_KEY = 'd92949d8'
const [movies, setMovies] = useState([])
const [loading, setLoading] = useState(true)
+ const [currentPage, setCurrentPage] = useState(1)
+ const [totalPages, setTotalPages] = useState(0)
useEffect(() => {
fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=spider-man`)
.then((response) => response.json())
.then((data) => {
setMovies(data.Search)
+ setTotalPages(data.totalResults)
})
.then(() => setLoading(false))
.catch((error) => console.log(error))
}, [])
+ const calculatePages = (totalResults: number): number => {
+ return Math.round(totalResults / 10)
+ }
+
return (
<>
-
-
All movies
-
+
+ All movies
+ Pages
+ {calculatePages(totalPages)}
+
+
+
+
{!loading && movies ? (
-
-
-
- | Poster |
- Title |
- Year |
-
+
+
+
+ Poster
+ Title
+ Year
+
{movies.map((movie: any) => (
-
-
- 
- |
- {movie.Title} |
- {movie.Year} |
-
+
+
+
+
+ {movie.Title}
+ {movie.Year}
+
))}
-
-
Loading...
+ Loading...
)}
diff --git a/src/components/PaginationButton/index.tsx b/src/components/PaginationButton/index.tsx
new file mode 100644
index 0000000..6f2b5c2
--- /dev/null
+++ b/src/components/PaginationButton/index.tsx
@@ -0,0 +1,15 @@
+import q from 'qjuul'
+
+interface PaginationButtonProps {
+ pageNumber: number
+}
+
+const PaginationButton: React.FC = ({ pageNumber }) => {
+ return (
+
+ {pageNumber}
+
+ )
+}
+
+export default PaginationButton
diff --git a/src/components/PaginationButton/styles.css b/src/components/PaginationButton/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..8a0c332
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export { default as PaginationButton } from './PaginationButton'
diff --git a/src/main.tsx b/src/main.tsx
index 3d7150d..ed31931 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
-import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
- ,
+
)