[dyad] Made meta tags editable for testing - wrote 1 file(s)

src/components/meta-form.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 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 { extractMetaData } from "@/app/actions";
@@ -20,6 +21,16 @@ export function MetaForm() {
   const [error, setError] = useState<string | null>(null);
   const [metaData, setMetaData] = useState<MetaData | null>(null);
 
+  const [editableTitle, setEditableTitle] = useState("");
+  const [editableDescription, setEditableDescription] = useState("");
+
+  useEffect(() => {
+    if (metaData) {
+      setEditableTitle(metaData.title);
+      setEditableDescription(metaData.description);
+    }
+  }, [metaData]);
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setLoading(true);
@@ -96,38 +107,44 @@ export function MetaForm() {
               </div>
             )}
             <div>
-              <div className="flex items-center justify-between mb-1">
+              <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-2">
                   <h3 className="font-semibold text-card-foreground">
                     Meta Title
                   </h3>
                   <LengthIndicator
-                    length={metaData.title.length}
+                    length={editableTitle.length}
                     type="title"
                   />
                 </div>
-                <CopyButton textToCopy={metaData.title} />
+                <CopyButton textToCopy={editableTitle} />
               </div>
-              <p className="text-muted-foreground bg-muted p-3 rounded-md">
-                {metaData.title || "Not found"}
-              </p>
+              <Input
+                value={editableTitle}
+                onChange={(e) => setEditableTitle(e.target.value)}
+                className="w-full bg-muted"
+                placeholder="Meta Title"
+              />
             </div>
             <div>
-              <div className="flex items-center justify-between mb-1">
+              <div className="flex items-center justify-between mb-2">
                 <div className="flex items-center gap-2">
                   <h3 className="font-semibold text-card-foreground">
                     Meta Description
                   </h3>
                   <LengthIndicator
-                    length={metaData.description.length}
+                    length={editableDescription.length}
                     type="description"
                   />
                 </div>
-                <CopyButton textToCopy={metaData.description} />
+                <CopyButton textToCopy={editableDescription} />
               </div>
-              <p className="text-muted-foreground bg-muted p-3 rounded-md">
-                {metaData.description || "Not found"}
-              </p>
+              <Textarea
+                value={editableDescription}
+                onChange={(e) => setEditableDescription(e.target.value)}
+                className="w-full bg-muted min-h-[100px]"
+                placeholder="Meta Description"
+              />
             </div>
           </CardContent>
         </Card>