[dyad] Added FAQ structured data extraction - wrote 4 file(s)

src/components/faq-display.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+interface FaqDisplayProps {
+  faqs: {
+    question: string;
+    answer: string;
+  }[];
+}
+
+export function FaqDisplay({ faqs }: FaqDisplayProps) {
+  return (
+    <div>
+      <h3 className="font-semibold text-card-foreground mb-2">
+        FAQ Structured Data
+      </h3>
+      <Accordion type="single" collapsible className="w-full">
+        {faqs.map((faq, index) => (
+          <AccordionItem value={`item-${index}`} key={index}>
+            <AccordionTrigger>{faq.question}</AccordionTrigger>
+            <AccordionContent>{faq.answer}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

src/components/meta-form.tsx

@@ -11,11 +11,13 @@ import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
 import { SerpPreview } from "./serp-preview";
 import { ResultsSkeleton } from "./results-skeleton";
+import { FaqDisplay } from "./faq-display";
 
 interface MetaData {
   title: string;
   description: string;
   image?: string | null;
+  faq?: { question: string; answer: string }[] | null;
 }
 
 export function MetaForm() {
@@ -159,6 +161,10 @@ export function MetaForm() {
                     </div>
                   </div>
                 )}
+                
+                {metaData.faq && metaData.faq.length > 0 && (
+                  <FaqDisplay faqs={metaData.faq} />
+                )}
               </div>
               <div className="space-y-6">
                 <div>

src/components/results-skeleton.tsx

@@ -31,6 +31,14 @@ export function ResultsSkeleton() {
               <Skeleton className="h-5 w-32 mb-2" />
               <Skeleton className="aspect-video w-full rounded-md" />
             </div>
+            <div>
+              <Skeleton className="h-5 w-40 mb-3" />
+              <div className="space-y-2">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            </div>
           </div>
           <div className="space-y-6">
             <div>