Refactor ActionButtons for responsive visibility; enhance PromptCard …

…layout with hover effects; improve PromptForm textarea for dynamic height adjustment
astriaai · Nov 8, 2024 · c919202 · c919202
1 parent ff24adf
commit c919202
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/components/PromptCard/ActionButtons.tsx b/src/components/PromptCard/ActionButtons.tsx
@@ -27,7 +27,7 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({ prompt }) => {
         className="flex items-center gap-1"
       >
         <Heart className={`w-4 h-4 text-red-600 ${isLiked ? "fill-current" : ""}`} />
-        <span className="hidden md:inline">{isLiked ? "Unlike" : "Like"}</span>
+        <span className="hidden custom-lg:inline">{isLiked ? "Unlike" : "Like"}</span>
       </Button>
       <Button
         variant="ghost"
@@ -36,7 +36,7 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({ prompt }) => {
         className="flex items-center gap-1"
       >
         {isPromptUsed ? <Check className="w-4 h-4 text-green-600" /> : <Type className="w-4 h-4" />}
-        <span className="hidden md:inline">Use</span>
+        <span className="hidden custom-lg:inline">Use</span>
       </Button>
       <Button
         variant="ghost"
@@ -45,11 +45,11 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({ prompt }) => {
         className="flex items-center gap-1"
       >
         {isTrashed ? <Check className="w-4 h-4 text-green-600" /> : <Trash className="w-4 h-4" />}
-        <span className="hidden md:inline">{isTrashed ? "Trashed!" : "Trash"}</span>
+        <span className="hidden custom-lg:inline">{isTrashed ? "Trashed!" : "Trash"}</span>
       </Button>
       <Button variant="ghost" size="sm" onClick={() => handleCopy(prompt)} className="flex items-center gap-1">
         {isCopied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-        <span className="hidden md:inline">{isCopied ? "Copied!" : "Copy"}</span>
+        <span className="hidden custom-lg:inline">{isCopied ? "Copied!" : "Copy"}</span>
       </Button>
     </div>
   );

diff --git a/src/components/PromptCard/PromptCard.tsx b/src/components/PromptCard/PromptCard.tsx
@@ -22,7 +22,7 @@ const PromptCard: React.FC<PromptCardProps> = ({ prompt: initialPrompt }) => {
   };
 
   return (
-    <div className="mb-4 w-full cursor-pointer flex flex-col-reverse md:flex-row">
+    <div className="mb-4 w-full cursor-pointer flex flex-col-reverse md:flex-row group">
       <ImageGrid images={displayPrompt.images} onClick={handleImageClick} />
       <div className="md:w-[30%] p-2 flex flex-col text-sm text-black">
         <div className="flex-1">
@@ -31,7 +31,9 @@ const PromptCard: React.FC<PromptCardProps> = ({ prompt: initialPrompt }) => {
           </p>
           <PropertiesDisplay prompt={displayPrompt} />
         </div>
-        <ActionButtons prompt={displayPrompt} />
+        <div className="md:opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+          <ActionButtons prompt={displayPrompt} />
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/PromptForm/PromptForm.tsx b/src/components/PromptForm/PromptForm.tsx
@@ -130,7 +130,7 @@ const PromptForm: React.FC<PromptFormProps> = () => {
                         <div className="flex flex-col md:flex-row items-stretch">
                             <div className="flex-1">
 
-                                <div className="flex items-center h-12">
+                                <div className="flex items-center h-auto min-h-12">
                                     <div className="flex gap-2 mx-1">
                                         <TooltipProvider>
                                             <Tooltip>
@@ -147,10 +147,18 @@ const PromptForm: React.FC<PromptFormProps> = () => {
 
                                     </div>
 
-                                    <Textarea placeholder="Write a prompt..." className="resize-none flex-1"
+                                    <Textarea placeholder="Write a prompt..." className="resize-none text-wrap flex-1"
                                         value={`${promptText}`}
                                         onChange={(e) => setPromptText(e.target.value)}
-                                        aria-label="Prompt text" rows={1} />
+                                        aria-label="Prompt text"
+                                        rows={1}
+                                        style={{ overflow: 'hidden' }}
+                                        onInput={(e) => {
+                                            const target = e.target as HTMLTextAreaElement;
+                                            target.style.height = 'auto';
+                                            target.style.height = `${target.scrollHeight}px`;
+                                        }}
+                                        autoFocus />
                                     <TooltipProvider>
                                         <Tooltip>
                                             <TooltipTrigger asChild>