Select komponens

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>
+                <h2 className="card-title text-green-800">{user.name.title} {user.name.first} {user.name.last}</h2>
-                <p>Phone:{user.phone}</p>
+                <p className="text-green-800">Phone:{user.phone}</p>
-                <p>Cell:{user.cell}</p>
+                <p className="text-green-800">Cell:{user.cell}</p>
-                <p>Email:{user.email}</p>
+                <p className="text-green-800">Email:{user.email}</p>
                 
                 <div className="card-actions">
                     

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,15 +16,20 @@ 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>
   )
 }
 

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