63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import axios from "axios";
|
|
import type { Result } from "./person";
|
|
import PersonItem from "./PersonItem";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "react-hot-toast";
|
|
|
|
const url = "https://randomuser.me/api/?results=12";
|
|
|
|
const PeoplePage = () => {
|
|
const [users, setUsers] = useState<Result[]>([]);
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get(url)
|
|
.then((response) => {
|
|
console.log(response);
|
|
setUsers(response.data.results);
|
|
setIsLoading(false);
|
|
})
|
|
.catch((error: any) => {
|
|
if (error.isAxiosError) {
|
|
console.log(error.response);
|
|
toast.error(`Error occurred while fetching..`);
|
|
} else {
|
|
console.log(error);
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<>
|
|
<span className="loading loading-ball loading-xs"></span>
|
|
<span className="loading loading-ball loading-sm"></span>
|
|
<span className="loading loading-ball loading-md"></span>
|
|
<span className="loading loading-ball loading-lg"></span>
|
|
<span className="loading loading-ball loading-xl"></span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2 className="font-bold text-center text-amber-900 tracking-tight mt-2 text-3xl">
|
|
People Page
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
|
|
{users?.map((user) => {
|
|
return (
|
|
<PersonItem {...user} key={user.login.uuid} remove={() => {}} />
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default PeoplePage;
|