diff --git a/src/components/bots/BotView.tsx b/src/components/bots/BotView.tsx index 5c92c8b..45e6732 100644 --- a/src/components/bots/BotView.tsx +++ b/src/components/bots/BotView.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { Bot, Edit, MessageSquare, Trash2 } from "lucide-react"; +import { Bot, Edit, MessageSquare, Trash2, ChevronLeft, ChevronRight } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -27,6 +27,8 @@ export const BotView = ({ onStartChat }: BotViewProps) => { const [isEditDialogOpen, setIsEditDialogOpen] = useState(false); const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); const [selectedBot, setSelectedBot] = useState(null); + const [currentPage, setCurrentPage] = useState(1); + const [itemsPerPage, setItemsPerPage] = useState(10); const [formData, setFormData] = useState({ name: "", @@ -34,6 +36,18 @@ export const BotView = ({ onStartChat }: BotViewProps) => { model: "ChatGPT 4.1", }); + // Pagination calculations + const totalPages = Math.ceil(bots.length / itemsPerPage); + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = startIndex + itemsPerPage; + const currentBots = bots.slice(startIndex, endIndex); + + // Reset to page 1 when items per page changes + const handleItemsPerPageChange = (value: string) => { + setItemsPerPage(Number(value)); + setCurrentPage(1); + }; + const handleCreateBot = () => { const newBot: Bot = { id: Date.now().toString(), @@ -186,7 +200,7 @@ export const BotView = ({ onStartChat }: BotViewProps) => { - {bots.map((bot) => ( + {currentBots.map((bot) => ( {bot.name} {bot.model} @@ -222,6 +236,64 @@ export const BotView = ({ onStartChat }: BotViewProps) => { ))} + + {/* Pagination Controls */} +
+
+ Itens por página: + +
+ +
+ + Página {currentPage} de {totalPages} ({bots.length} total) + +
+ + + + +
+
+
)}