From bf2f22c8fd08a9826ff4b6a7389f74475b564826 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kov=C3=A1cs=20Rudolf?= <kovacsrud@gszi.edu.hu>
Date: Mon, 5 Oct 2026 12:00:33 +0200
Subject: [PATCH] Select komponens

---
 randomuser_api/src/components/RandomUser.jsx  | 10 ++++-----
 randomuser_api/src/components/RandomUsers.jsx | 14 ++++++++++---
 randomuser_api/src/components/UserSelect.jsx  | 21 +++++++++++++++++++
 3 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 randomuser_api/src/components/UserSelect.jsx

diff --git a/randomuser_api/src/components/RandomUser.jsx b/randomuser_api/src/components/RandomUser.jsx
index 82d4f9f..1a05e59 100644
--- a/randomuser_api/src/components/RandomUser.jsx
+++ b/randomuser_api/src/components/RandomUser.jsx
@@ -2,7 +2,7 @@
 
 function RandomUser({ user }) {
     return (
-        <div className="card bg-base-100 w-96 shadow-sm">
+        <div className="card bg-green-200 w-96 shadow-sm m-2">
             <figure className="px-10 pt-10">
                 <img
                     src={user.picture.large}
@@ -10,10 +10,10 @@ function RandomUser({ user }) {
                     className="rounded-xl" />
             </figure>
             <div className="card-body items-center text-center">
-                <h2 className="card-title">{user.name.title} {user.name.first} {user.name.last}</h2>
-                <p>Phone:{user.phone}</p>
-                <p>Cell:{user.cell}</p>
-                <p>Email:{user.email}</p>
+                <h2 className="card-title text-green-800">{user.name.title} {user.name.first} {user.name.last}</h2>
+                <p className="text-green-800">Phone:{user.phone}</p>
+                <p className="text-green-800">Cell:{user.cell}</p>
+                <p className="text-green-800">Email:{user.email}</p>
                 
                 <div className="card-actions">
                     
diff --git a/randomuser_api/src/components/RandomUsers.jsx b/randomuser_api/src/components/RandomUsers.jsx
index e585c18..0e32d09 100644
--- a/randomuser_api/src/components/RandomUsers.jsx
+++ b/randomuser_api/src/components/RandomUsers.jsx
@@ -1,10 +1,13 @@
 import { useState,useEffect } from "react";
+import RandomUser from "./RandomUser";
+import UserSelect from "./UserSelect";
 
 function RandomUsers() {
     const[users,setUsers]=useState([]);
+    const[usernumber,setUserNumber]=useState(10);
 
     const letolt=()=>{
-        fetch('https://randomuser.me/api/?results=50')
+        fetch(`https://randomuser.me/api/?results=${usernumber}`)
         .then(res=>res.json())
         .then(adat=>setUsers(adat.results))
         .catch(err=>alert(err));
@@ -13,14 +16,19 @@ function RandomUsers() {
 
     useEffect(()=>{
         letolt();
-    },[])
+    },[usernumber])
 
   return (
     <div>
         <h2 className="text-2xl text-center font-bold text-green-900 m-5">Felhasználók:</h2>
+        <UserSelect setUserNumber={setUserNumber} />
+        {/*<div className="flex flex-row flex-wrap items-center justify-center">*/}
+        <div className="grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1 justify-items-center">
         {
-            users.map((user,i)=>(<p key={i}>{user.name.title}{user.name.first}{user.name.last}</p>))
+            //users.map((user,i)=>(<p key={i}>{user.name.title}{user.name.first}{user.name.last}</p>))
+            users.map((user,i)=>(<RandomUser key={i} user={user} />))
         }
+        </div>
     </div>
   )
 }
diff --git a/randomuser_api/src/components/UserSelect.jsx b/randomuser_api/src/components/UserSelect.jsx
new file mode 100644
index 0000000..2465ee0
--- /dev/null
+++ b/randomuser_api/src/components/UserSelect.jsx
@@ -0,0 +1,21 @@
+
+
+function UserSelect({setUserNumber}) {
+    return (
+        <div className="flex flex-row items-center justify-center m-5">
+        <select onChange={(e)=>setUserNumber(e.target.value)} className="select">
+            <option selected value="5">5</option>
+            <option value="10">10</option>
+            <option value="15">15</option>
+            <option value="20">20</option>
+            <option value="25">25</option>
+            <option value="30">30</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+        </select>
+        <button className="btn btn-primary m-5">Gomb</button>
+        </div>
+    )
+}
+
+export default UserSelect
\ No newline at end of file