api ulangan

src/features/users/ui/UserTable.tsx

@@ -0,0 +1,61 @@
+import type { UserData } from "@/features/users/lib/data";
+import { UserCard } from "@/features/users/ui/UserCard";
+import { Loader2 } from "lucide-react";
+import { type Dispatch, type SetStateAction } from "react";
+
+interface Props {
+  data: UserData[] | undefined;
+  isLoading: boolean;
+  isError: boolean;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setEditingUser: Dispatch<SetStateAction<UserData | null>>;
+  setOpenDelete: Dispatch<SetStateAction<boolean>>;
+  setUserDelete: Dispatch<SetStateAction<UserData | null>>;
+}
+
+const UserTable = ({
+  data,
+  isLoading,
+  isError,
+  setDialogOpen,
+  setEditingUser,
+  setOpenDelete,
+  setUserDelete,
+}: Props) => {
+  return (
+    <div className="flex-1 overflow-auto">
+      {isLoading && (
+        <div className="h-full flex items-center justify-center bg-white/70 z-10">
+          <Loader2 className="animate-spin" />
+        </div>
+      )}
+      {isError && (
+        <div className="h-full flex items-center justify-center z-10">
+          <span className="text-lg font-medium text-red-600">
+            Ma'lumotlarni olishda xatolik yuz berdi.
+          </span>
+        </div>
+      )}
+
+      {!isLoading && !isError && (
+        <>
+          {/* Users Grid */}
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {data?.map((user) => (
+              <UserCard
+                setOpenDelete={setOpenDelete}
+                setUserDelete={setUserDelete}
+                key={user.id}
+                setDialogOpen={setDialogOpen}
+                setEditingUser={setEditingUser}
+                user={{ ...user, role: user.is_superuser ? "admin" : "user" }}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default UserTable;