From 882b1a4f2513c3cc2469263de3cb3394fc52d63c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kov=C3=A1cs=20Rudolf?= <kovacsrud@gszi.edu.hu>
Date: Thu, 15 Oct 2026 11:15:09 +0200
Subject: [PATCH] =?UTF-8?q?Lapoz=C3=A1s=20implement=C3=A1l=C3=A1sa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rickandmorty/src/components/Character.jsx  | 24 ++++++--
 rickandmorty/src/components/Characters.jsx | 70 ++++++++++++++++++++--
 rickandmorty/src/components/Main.jsx       | 22 ++++++-
 3 files changed, 105 insertions(+), 11 deletions(-)

diff --git a/rickandmorty/src/components/Character.jsx b/rickandmorty/src/components/Character.jsx
index 1300ed9..8bcc1d4 100644
--- a/rickandmorty/src/components/Character.jsx
+++ b/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
\ No newline at end of file
diff --git a/rickandmorty/src/components/Characters.jsx b/rickandmorty/src/components/Characters.jsx
index 3357951..8afc5d3 100644
--- a/rickandmorty/src/components/Characters.jsx
+++ b/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
\ No newline at end of file
diff --git a/rickandmorty/src/components/Main.jsx b/rickandmorty/src/components/Main.jsx
index 0fe20d0..aa76fb2 100644
--- a/rickandmorty/src/components/Main.jsx
+++ b/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
\ No newline at end of file