[dyad] Added an edit mode for meta tags - wrote 1 file(s)

src/components/meta-form.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Globe } from "lucide-react";
+import { Globe, Edit, Check } from "lucide-react";
 import { extractMetaData } from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
@@ -20,6 +20,7 @@ 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 [editableTitle, setEditableTitle] = useState("");
   const [editableDescription, setEditableDescription] = useState("");
@@ -36,6 +37,7 @@ export function MetaForm() {
     setLoading(true);
     setError(null);
     setMetaData(null);
+    setIsEditing(false);
 
     const formData = new FormData(event.currentTarget);
     const url = formData.get("url") as string;
@@ -87,9 +89,28 @@ export function MetaForm() {
       {metaData && (
         <Card className="w-full shadow-lg rounded-lg">
           <CardHeader>
-            <CardTitle className="text-xl text-card-foreground">
+            <div className="flex justify-between items-center">
-              Extraction Results
+              <CardTitle className="text-xl text-card-foreground">
-            </CardTitle>
+                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 && (
@@ -119,12 +140,18 @@ export function MetaForm() {
                 </div>
                 <CopyButton textToCopy={editableTitle} />
               </div>
-              <Input
+              {isEditing ? (
-                value={editableTitle}
+                <Input
-                onChange={(e) => setEditableTitle(e.target.value)}
+                  value={editableTitle}
-                className="w-full bg-muted"
+                  onChange={(e) => setEditableTitle(e.target.value)}
-                placeholder="Meta Title"
+                  className="w-full bg-muted"
-              />
+                  placeholder="Meta Title"
+                />
+              ) : (
+                <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[40px] break-words">
+                  {editableTitle || "Not found"}
+                </p>
+              )}
             </div>
             <div>
               <div className="flex items-center justify-between mb-2">
@@ -139,12 +166,18 @@ export function MetaForm() {
                 </div>
                 <CopyButton textToCopy={editableDescription} />
               </div>
-              <Textarea
+              {isEditing ? (
-                value={editableDescription}
+                <Textarea
-                onChange={(e) => setEditableDescription(e.target.value)}
+                  value={editableDescription}
-                className="w-full bg-muted min-h-[100px]"
+                  onChange={(e) => setEditableDescription(e.target.value)}
-                placeholder="Meta Description"
+                  className="w-full bg-muted min-h-[100px]"
-              />
+                  placeholder="Meta Description"
+                />
+              ) : (
+                <p className="text-muted-foreground bg-muted p-3 rounded-md min-h-[100px] break-words">
+                  {editableDescription || "Not found"}
+                </p>
+              )}
             </div>
           </CardContent>
         </Card>