diff --git a/src/pages/Prompts.tsx b/src/pages/Prompts.tsx index 40428d9..e614feb 100644 --- a/src/pages/Prompts.tsx +++ b/src/pages/Prompts.tsx @@ -1,11 +1,26 @@ -import { useState } from "react"; +import { useState, useMemo } from "react"; import { PromptCard } from "@/components/prompts/PromptCard"; import { CreatePromptDialog } from "@/components/prompts/CreatePromptDialog"; import { Button } from "@/components/ui/button"; -import { Plus } from "lucide-react"; +import { Input } from "@/components/ui/input"; +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "@/components/ui/pagination"; +import { Plus, Search } from "lucide-react"; + +const ITEMS_PER_PAGE = 6; export default function Prompts() { const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); + const [currentPage, setCurrentPage] = useState(1); + const [prompts] = useState([ { id: 1, @@ -35,11 +50,54 @@ export default function Prompts() { lastModified: "3 dias atrás", status: "published" as const, }, + { + id: 5, + title: "Prompt de Suporte Técnico", + creator: "Carlos Mendes", + lastModified: "4 dias atrás", + status: "published" as const, + }, + { + id: 6, + title: "Prompt de Onboarding", + creator: "Fernanda Silva", + lastModified: "6 dias atrás", + status: "draft" as const, + }, + { + id: 7, + title: "Prompt de Follow-up", + creator: "Rafael Santos", + lastModified: "1 dia atrás", + status: "published" as const, + }, ]); + // Filtra prompts baseado na pesquisa + const filteredPrompts = useMemo(() => { + if (!searchQuery.trim()) return prompts; + + const query = searchQuery.toLowerCase(); + return prompts.filter(prompt => + prompt.title.toLowerCase().includes(query) || + prompt.creator.toLowerCase().includes(query) + ); + }, [prompts, searchQuery]); + + // Calcula paginação + const totalPages = Math.ceil(filteredPrompts.length / ITEMS_PER_PAGE); + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; + const paginatedPrompts = filteredPrompts.slice(startIndex, startIndex + ITEMS_PER_PAGE); + + // Reset para primeira página quando busca muda + const handleSearchChange = (value: string) => { + setSearchQuery(value); + setCurrentPage(1); + }; + return (
-
+

Gestão de Prompts

@@ -52,22 +110,98 @@ export default function Prompts() {

-
- {prompts.map((prompt) => ( - console.log("Edit", prompt.id)} - onHistory={() => console.log("History", prompt.id)} - onTest={() => console.log("Test", prompt.id)} - onDuplicate={() => console.log("Duplicate", prompt.id)} +
+
+ + handleSearchChange(e.target.value)} + className="pl-10" /> - ))} +
+

+ {filteredPrompts.length} {filteredPrompts.length === 1 ? 'prompt encontrado' : 'prompts encontrados'} +

+ {paginatedPrompts.length === 0 ? ( +
+

Nenhum prompt encontrado com os critérios de busca.

+
+ ) : ( + <> +
+ {paginatedPrompts.map((prompt) => ( + console.log("Edit", prompt.id)} + onHistory={() => console.log("History", prompt.id)} + onTest={() => console.log("Test", prompt.id)} + onDuplicate={() => console.log("Duplicate", prompt.id)} + /> + ))} +
+ + {totalPages > 1 && ( +
+ + + + setCurrentPage(prev => Math.max(1, prev - 1))} + className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"} + /> + + + {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => { + // Mostrar primeira página, última página e páginas próximas à atual + if ( + page === 1 || + page === totalPages || + (page >= currentPage - 1 && page <= currentPage + 1) + ) { + return ( + + setCurrentPage(page)} + isActive={currentPage === page} + className="cursor-pointer" + > + {page} + + + ); + } else if ( + page === currentPage - 2 || + page === currentPage + 2 + ) { + return ( + + + + ); + } + return null; + })} + + + setCurrentPage(prev => Math.min(totalPages, prev + 1))} + className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"} + /> + + + +
+ )} + + )} +