api ulangan

src/features/objects/ui/BannersTable.tsx

@@ -0,0 +1,95 @@
+import type { BannerListItem } from "@/features/objects/lib/data";
+import { API_URLS } from "@/shared/config/api/URLs";
+import { Button } from "@/shared/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { Loader2, Trash2 } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  filteredData: BannerListItem[] | [];
+  setEditingPlan: Dispatch<SetStateAction<BannerListItem | null>>;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  handleDelete: (object: BannerListItem) => void;
+  isLoading: boolean;
+  isError: boolean;
+}
+
+const ObjectTable = ({
+  filteredData,
+  handleDelete,
+  isError,
+  isLoading,
+}: Props) => {
+  return (
+    <div className="flex-1 overflow-auto">
+      {isLoading && (
+        <div className="h-full flex items-center justify-center bg-white/70 z-10">
+          <span className="text-lg font-medium">
+            <Loader2 className="animate-spin" />
+          </span>
+        </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>
+      )}
+      {!isError && !isLoading && (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>#</TableHead>
+              <TableHead>Banner</TableHead>
+              <TableHead className="text-right">Amallar</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredData && filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <TableRow key={item.id}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell className="font-medium">
+                    <img
+                      src={API_URLS.BASE_URL + item.banner}
+                      alt={item.id}
+                      className="w-16 h-16"
+                    />
+                  </TableCell>
+
+                  <TableCell className="text-right space-x-2 gap-2">
+                    <Button
+                      variant="destructive"
+                      size="icon"
+                      className="cursor-pointer"
+                      onClick={() => handleDelete(item)}
+                    >
+                      <Trash2 size={18} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center py-4 text-lg">
+                  Obyekt topilmadi.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default ObjectTable;