[dyad] Added live SERP preview - wrote 2 file(s)

src/components/meta-form.tsx

@@ -9,6 +9,7 @@ import { Globe, Edit, Check, Loader2, X, ImageOff } from "lucide-react";
 import { extractMetaData } from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
+import { SerpPreview } from "./serp-preview";
 
 interface MetaData {
   title: string;
@@ -21,7 +22,7 @@ export function MetaForm() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [metaData, setMetaData] = useState<MetaData | null>(null);
-  
+
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [isEditingDescription, setIsEditingDescription] = useState(false);
 
@@ -120,6 +121,17 @@ export function MetaForm() {
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-6">
+            <div>
+              <h3 className="font-semibold text-card-foreground mb-2">
+                SERP Preview
+              </h3>
+              <SerpPreview
+                title={editableTitle}
+                description={editableDescription}
+                url={url}
+              />
+            </div>
+
             {metaData.image && (
               <div>
                 <h3 className="font-semibold text-card-foreground mb-2">
@@ -169,7 +181,9 @@ export function MetaForm() {
                     ) : (
                       <Edit className="h-4 w-4" />
                     )}
-                    <span className="sr-only">{isEditingTitle ? "Done editing" : "Edit"}</span>
+                    <span className="sr-only">
+                      {isEditingTitle ? "Done editing" : "Edit"}
+                    </span>
                   </Button>
                 </div>
               </div>
@@ -208,7 +222,9 @@ export function MetaForm() {
                   <Button
                     variant="ghost"
                     size="icon"
-                    onClick={() => setIsEditingDescription(!isEditingDescription)}
+                    onClick={() =>
+                      setIsEditingDescription(!isEditingDescription)
+                    }
                     className="h-8 w-8"
                   >
                     {isEditingDescription ? (
@@ -216,12 +232,15 @@ export function MetaForm() {
                     ) : (
                       <Edit className="h-4 w-4" />
                     )}
-                    <span className="sr-only">{isEditingDescription ? "Done editing" : "Edit"}</span>
+                    <span className="sr-only">
+                      {isEditingDescription ? "Done editing" : "Edit"}
+                    </span>
                   </Button>
                 </div>
               </div>
               <p className="text-sm text-muted-foreground mt-1 mb-2">
-                A brief summary of the page's content, ideally between 120 and 158 characters.
+                A brief summary of the page's content, ideally between 120 and
+                158 characters.
               </p>
               {isEditingDescription ? (
                 <Textarea