[dyad] Improved FAQ schema display - wrote 1 file(s)

src/components/pretty-schema-display.tsx

@@ -90,12 +90,31 @@ const renderValue = (value: any, level: number): React.ReactNode => {
         </div>
       );
     }
-    return <SchemaObjectRenderer data={value} isNested={true} level={level + 1} />;
+    return (
+      <SchemaObjectRenderer data={value} isNested={true} level={level + 1} />
+    );
   }
 
   return <span>{String(value)}</span>;
 };
 
+const FaqQuestion = ({ item }: { item: any }) => {
+  if (
+    item["@type"] === "Question" &&
+    item.name &&
+    item.acceptedAnswer?.text
+  ) {
+    return (
+      <div className="p-2 border rounded-md bg-background text-sm">
+        <p className="font-semibold text-muted-foreground">{item.name}</p>
+        <p className="mt-1 text-foreground">{item.acceptedAnswer.text}</p>
+      </div>
+    );
+  }
+  // Fallback for non-standard Q&A items
+  return <SchemaObjectRenderer data={item} isNested={true} level={2} />;
+};
+
 const SchemaObjectRenderer = ({
   data,
   isNested = false,
@@ -115,6 +134,27 @@ const SchemaObjectRenderer = ({
     >
       {Object.entries(data).map(([key, value]) => {
         if (key === "@context") return null;
+
+        // Custom rendering for FAQPage questions
+        if (
+          key === "mainEntity" &&
+          data["@type"] === "FAQPage" &&
+          Array.isArray(value)
+        ) {
+          return (
+            <React.Fragment key={key}>
+              <div className="flex items-center gap-2 font-semibold text-sm text-muted-foreground flex-shrink-0 whitespace-nowrap pt-0.5">
+                <span>Questions</span>
+              </div>
+              <div className="text-sm text-foreground space-y-2">
+                {value.map((item, index) => (
+                  <FaqQuestion key={index} item={item} />
+                ))}
+              </div>
+            </React.Fragment>
+          );
+        }
+
         const label =
           keyMappings[key] || key.charAt(0).toUpperCase() + key.slice(1);
         const Icon = keyIcons[key];