Lapozás implementálása

rickandmorty/src/components/Character.jsx

@@ -1,9 +1,25 @@
 
 
-function Character() {
-  return (
-    <div>Character</div>
-  )
+function Character({ character }) {
+    return (
+        <div className="card bg-sky-500 w-96 shadow-sm m-2">
+            <figure>
+                <img
+                    src={character.image}
+                    alt={character.name} />
+            </figure>
+            <div className="card-body">
+                <h2 className="card-title">{character.name}</h2>
+                <p>Status:{character.status}</p>
+                <p>Species:{character.species}</p>
+                <p>Gender:{character.gender}</p>
+                <p>Location:{character.location.name}</p>
+                <div className="card-actions justify-end">
+                    
+                </div>
+            </div>
+        </div>
+    )
 }
 
 export default Character

rickandmorty/src/components/Characters.jsx

@@ -1,9 +1,71 @@
-
+import { useState, useEffect } from "react"
+import Character from "./Character";
 
 function Characters() {
-  return (
-    <div>Characters</div>
-  )
+    const [characters, setCharacters] = useState([]);
+    const [info, setInfo] = useState({});
+    const [page, setPage] = useState(1);
+
+    const getCharacters = () => {
+        fetch(`https://rickandmortyapi.com/api/character?page=${page}`)
+            .then(res => res.json())
+            .then(adatok => {
+                setCharacters(adatok.results);
+                setInfo(adatok.info);
+            })
+            .catch(err => alert(err));
+    }
+
+    const asGetCharacters = async () => {
+        try {
+            let keres = await fetch(`https://rickandmortyapi.com/api/character?page=${page}`);
+            let adatok = await keres.json();
+            setCharacters(adatok.results);
+            setInfo(adatok.info);
+
+        } catch (error) {
+            alert(error);
+        }
+    }
+
+    const tovabb = () => {
+        if (page < info.pages) {
+            setPage(prev => prev + 1);
+        }
+
+    }
+
+    const vissza = () => {
+        if (page > 1) {
+            setPage(prev => prev - 1);
+        }
+
+    }
+
+    useEffect(() => {
+        getCharacters();
+    }, [page])
+
+    return (
+        <div className="bg-sky-300">
+            <h2 className="text-2xl font-bold text-center text-sky-900 p-2">Characters</h2>
+            <div className="flex flex-row items-center justify-center join m-2">
+                <button onClick={vissza} className="join-item btn bg-sky-200">«</button>
+                <button className="join-item btn bg-sky-200">{page}</button>
+                <button onClick={tovabb} className="join-item btn bg-sky-200">»</button>
+            </div>
+            <div className="flex flex-row flex-wrap items-center justify-center">
+                {
+                    characters.map((character) => (<Character key={character.id} character={character} />))
+                }
+            </div>
+             <div className="flex flex-row items-center justify-center join m-2">
+                <button onClick={vissza} className="join-item btn bg-sky-200">«</button>
+                <button className="join-item btn bg-sky-200">{page}</button>
+                <button onClick={tovabb} className="join-item btn bg-sky-200">»</button>
+            </div>
+        </div>
+    )
 }
 
 export default Characters

rickandmorty/src/components/Main.jsx

@@ -1,9 +1,25 @@
 
 
 function Main() {
-  return (
-    <div>Main</div>
-  )
+    return (
+        <div className="hero bg-sky-300 min-h-screen">
+            <div className="hero-content flex-col lg:flex-row-reverse">
+                <img
+                    alt="Rick and Morty API"
+                    src="https://rickandmortyapi.com/api/character/avatar/1.jpeg"
+                    className="max-w-sm rounded-lg shadow-2xl"
+                />
+                <div>
+                    <h1 className="text-5xl font-bold">Rick and Morty API</h1>
+                    <p className="py-6">
+                        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+                        quasi. In deleniti eaque aut repudiandae et a id nisi.
+                    </p>
+                    <button className="btn btn-primary">Get Started</button>
+                </div>
+            </div>
+        </div>
+    )
 }
 
 export default Main