first commit

app/people/page-origin.tsx

@@ -0,0 +1,62 @@
+"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;