update prompts to be tabbable (mckaywrigley#241)

xCrazylei · Mar 28, 2023 · 00d8074 · 00d8074
1 parent a3eb247
commit 00d8074
Showing 1 changed file with 25 additions and 32 deletions.
diff --git a/components/Promptbar/Prompt.tsx b/components/Promptbar/Prompt.tsx
@@ -39,9 +39,9 @@ export const PromptComponent: FC<Props> = ({
   }, [isRenaming, isDeleting]);
 
   return (
-    <>
+    <div className="relative flex items-center">
       <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"
+        className="flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sm transition-colors duration-200 hover:bg-[#343541]/90"
         draggable="true"
         onClick={(e) => {
           e.stopPropagation();
@@ -54,27 +54,17 @@ export const PromptComponent: FC<Props> = ({
           setRenameValue('');
         }}
       >
-        <IconBulbFilled size={16} />
+        <IconBulbFilled size={18} />
 
-        {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>
-        )}
+        <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis whitespace-nowrap break-all text-left text-[12.5px] leading-3">
+          {prompt.name}
+        </div>
+      </button>
 
         {(isDeleting || isRenaming) && (
-          <div className="-ml-2 flex gap-1">
-            <IconCheck
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
 
@@ -84,32 +74,35 @@ export const PromptComponent: FC<Props> = ({
 
                 setIsDeleting(false);
               }}
-            />
+            >
+              <IconCheck size={18} />
+            </button>
 
-            <IconX
-              className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={16}
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(false);
               }}
-            />
+            >
+              <IconX size={18} />
+            </button>
           </div>
         )}
 
         {!isDeleting && !isRenaming && (
-          <div className="-ml-2 flex gap-1">
-            <IconTrash
-              className=" min-w-[20px] text-neutral-400 hover:text-neutral-100"
-              size={18}
+          <div className="absolute right-1 z-10 flex text-gray-300">
+            <button
+              className="min-w-[20px] p-1 text-neutral-400 hover:text-neutral-100"
               onClick={(e) => {
                 e.stopPropagation();
                 setIsDeleting(true);
               }}
-            />
+            >
+              <IconTrash size={18} />
+            </button>
           </div>
         )}
-      </button>
 
       {showModal && (
         <PromptModal
@@ -118,6 +111,6 @@ export const PromptComponent: FC<Props> = ({
           onUpdatePrompt={onUpdatePrompt}
         />
       )}
-    </>
+    </div>
   );
 };