Prompts (#229)

2023-03-27 09:38:56 -06:00
parent 2269403806
commit 34c79c0d66
51 changed files with 1744 additions and 295 deletions
@@ -0,0 +1,123 @@
+import { Prompt } from '@/types/prompt';
+import {
+  IconBulbFilled,
+  IconCheck,
+  IconTrash,
+  IconX,
+} from '@tabler/icons-react';
+import { DragEvent, FC, useEffect, useState } from 'react';
+import { PromptModal } from './PromptModal';
+
+interface Props {
+  prompt: Prompt;
+  onUpdatePrompt: (prompt: Prompt) => void;
+  onDeletePrompt: (prompt: Prompt) => void;
+}
+
+export const PromptComponent: FC<Props> = ({
+  prompt,
+  onUpdatePrompt,
+  onDeletePrompt,
+}) => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState('');
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>, prompt: Prompt) => {
+    if (e.dataTransfer) {
+      e.dataTransfer.setData('prompt', JSON.stringify(prompt));
+    }
+  };
+
+  useEffect(() => {
+    if (isRenaming) {
+      setIsDeleting(false);
+    } else if (isDeleting) {
+      setIsRenaming(false);
+    }
+  }, [isRenaming, isDeleting]);
+
+  return (
+    <>
+      <button
+        className="text-sidebar flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[14px] transition-colors duration-200 hover:bg-[#343541]/90"
+        draggable="true"
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowModal(true);
+        }}
+        onDragStart={(e) => handleDragStart(e, prompt)}
+        onMouseLeave={() => {
+          setIsDeleting(false);
+          setIsRenaming(false);
+          setRenameValue('');
+        }}
+      >
+        <IconBulbFilled size={16} />
+
+        {isRenaming ? (
+          <input
+            className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
+            type="text"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            autoFocus
+          />
+        ) : (
+          <div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
+            {prompt.name}
+          </div>
+        )}
+
+        {(isDeleting || isRenaming) && (
+          <div className="-ml-2 flex gap-1">
+            <IconCheck
+              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
+              size={16}
+              onClick={(e) => {
+                e.stopPropagation();
+
+                if (isDeleting) {
+                  onDeletePrompt(prompt);
+                }
+
+                setIsDeleting(false);
+              }}
+            />
+
+            <IconX
+              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
+              size={16}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDeleting(false);
+              }}
+            />
+          </div>
+        )}
+
+        {!isDeleting && !isRenaming && (
+          <div className="-ml-2 flex gap-1">
+            <IconTrash
+              className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
+              size={18}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDeleting(true);
+              }}
+            />
+          </div>
+        )}
+      </button>
+
+      {showModal && (
+        <PromptModal
+          prompt={prompt}
+          onClose={() => setShowModal(false)}
+          onUpdatePrompt={onUpdatePrompt}
+        />
+      )}
+    </>
+  );
+};