first commit

app/people/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import type { Result } from "./person";
+import PersonItem from "./PersonItem";
+
+import { useEffect, useState } from "react";
+
+import {
+  fetchRandomUsers,
+  clearList,
+  removeUser,
+} from "@/lib/features/people/personSlice";
+
+import { useAppSelector, useAppDispatch, useAppStore } from "../../lib/hooks";
+
+const PeoplePage = () => {
+  const { results, isLoading } = useAppSelector((store) => store.people);
+
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(fetchRandomUsers());
+  }, []);
+
+  const handleClearList = () => {
+    dispatch(clearList());
+  };
+
+  const reset = () => {
+    dispatch(fetchRandomUsers());
+  };
+
+  const remove = (id: any) => {
+    dispatch(removeUser(id));
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6 max-w-md mx-auto my-4">
+        {" "}
+        <span className="loading loading-spinner loading-sm"></span>
+      </div>
+    );
+  }
+  return (
+    <section>
+      <h2 className="font-bold text-center text-amber-900 tracking-tight mt-2 text-3xl">
+        People Page
+      </h2>
+      <div className="flex items-center justify-center mt-5">
+        {results?.length < 1 ? (
+          <button className="btn btn-soft" onClick={reset}>
+            reset
+          </button>
+        ) : (
+          <button className="btn btn-soft" onClick={handleClearList}>
+            Clear All
+          </button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
+        {results?.map((p: Result) => {
+          return <PersonItem {...p} key={p.login.uuid} remove={remove} />;
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default PeoplePage;