import { PromptComponent } from '@/components/Promptbar/Prompt'; import { Folder } from '@/types/folder'; import { Prompt } from '@/types/prompt'; import { IconCaretDown, IconCaretRight, IconCheck, IconPencil, IconTrash, IconX, } from '@tabler/icons-react'; import { FC, KeyboardEvent, useEffect, useState } from 'react'; interface Props { searchTerm: string; prompts: Prompt[]; currentFolder: Folder; onDeleteFolder: (folder: string) => void; onUpdateFolder: (folder: string, name: string) => void; // prompt props onDeletePrompt: (prompt: Prompt) => void; onUpdatePrompt: (prompt: Prompt) => void; } export const PromptFolder: FC = ({ searchTerm, prompts, currentFolder, onDeleteFolder, onUpdateFolder, // prompt props onDeletePrompt, onUpdatePrompt, }) => { const [isDeleting, setIsDeleting] = useState(false); const [isRenaming, setIsRenaming] = useState(false); const [renameValue, setRenameValue] = useState(''); const [isOpen, setIsOpen] = useState(false); const handleEnterDown = (e: KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); handleRename(); } }; const handleRename = () => { onUpdateFolder(currentFolder.id, renameValue); setRenameValue(''); setIsRenaming(false); }; const handleDrop = (e: any, folder: Folder) => { if (e.dataTransfer) { setIsOpen(true); const prompt = JSON.parse(e.dataTransfer.getData('prompt')); const updatedPrompt = { ...prompt, folderId: folder.id, }; onUpdatePrompt(updatedPrompt); e.target.style.background = 'none'; } }; const allowDrop = (e: any) => { e.preventDefault(); }; const highlightDrop = (e: any) => { e.target.style.background = '#343541'; }; const removeHighlight = (e: any) => { e.target.style.background = 'none'; }; useEffect(() => { if (isRenaming) { setIsDeleting(false); } else if (isDeleting) { setIsRenaming(false); } }, [isRenaming, isDeleting]); useEffect(() => { if (searchTerm) { setIsOpen(true); } else { setIsOpen(false); } }, [searchTerm]); return ( <>
{isRenaming ? (
{isOpen ? ( ) : ( )} setRenameValue(e.target.value)} onKeyDown={handleEnterDown} autoFocus />
) : ( )} {(isDeleting || isRenaming) && (
)} {!isDeleting && !isRenaming && (
)}
{isOpen ? prompts.map((prompt, index) => { if (prompt.folderId === currentFolder.id) { return (
); } }) : null} ); };