[dyad] Added field-specific edit buttons - wrote 1 file(s)

src/components/meta-form.tsx

@@ -20,7 +20,9 @@ export function MetaForm() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [metaData, setMetaData] = useState<MetaData | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
+  
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [isEditingDescription, setIsEditingDescription] = useState(false);
 
   const [editableTitle, setEditableTitle] = useState("");
   const [editableDescription, setEditableDescription] = useState("");
@@ -37,7 +39,8 @@ export function MetaForm() {
     setLoading(true);
     setError(null);
     setMetaData(null);
-    setIsEditing(false);
+    setIsEditingTitle(false);
+    setIsEditingDescription(false);
 
     const formData = new FormData(event.currentTarget);
     const url = formData.get("url") as string;
@@ -89,28 +92,9 @@ export function MetaForm() {
       {metaData && (
         <Card className="w-full shadow-lg rounded-lg">
           <CardHeader>
-            <div className="flex justify-between items-center">
             <CardTitle className="text-xl text-card-foreground">
               Extraction Results
             </CardTitle>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setIsEditing(!isEditing)}
-              >
-                {isEditing ? (
-                  <>
-                    <Check className="mr-2 h-4 w-4" />
-                    Done
-                  </>
-                ) : (
-                  <>
-                    <Edit className="mr-2 h-4 w-4" />
-                    Edit
-                  </>
-                )}
-              </Button>
-            </div>
           </CardHeader>
           <CardContent className="space-y-6">
             {metaData.image && (
@@ -138,9 +122,24 @@ export function MetaForm() {
                     type="title"
                   />
                 </div>
+                <div className="flex items-center">
                   <CopyButton textToCopy={editableTitle} />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setIsEditingTitle(!isEditingTitle)}
+                    className="h-8 w-8"
+                  >
+                    {isEditingTitle ? (
+                      <Check className="h-4 w-4" />
+                    ) : (
+                      <Edit className="h-4 w-4" />
+                    )}
+                    <span className="sr-only">{isEditingTitle ? "Done editing" : "Edit"}</span>
+                  </Button>
                 </div>
-              {isEditing ? (
+              </div>
+              {isEditingTitle ? (
                 <Input
                   value={editableTitle}
                   onChange={(e) => setEditableTitle(e.target.value)}
@@ -164,9 +163,24 @@ export function MetaForm() {
                     type="description"
                   />
                 </div>
+                <div className="flex items-center">
                   <CopyButton textToCopy={editableDescription} />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setIsEditingDescription(!isEditingDescription)}
+                    className="h-8 w-8"
+                  >
+                    {isEditingDescription ? (
+                      <Check className="h-4 w-4" />
+                    ) : (
+                      <Edit className="h-4 w-4" />
+                    )}
+                    <span className="sr-only">{isEditingDescription ? "Done editing" : "Edit"}</span>
+                  </Button>
                 </div>
-              {isEditing ? (
+              </div>
+              {isEditingDescription ? (
                 <Textarea
                   value={editableDescription}
                   onChange={(e) => setEditableDescription(e.target.value)}