[dyad] Added schema display tab - wrote 3 file(s)

src/components/meta-form.tsx

@@ -30,12 +30,14 @@ import { ImageAltDisplay } from "./image-alt-display";
 import { TabIndicator } from "./tab-indicator";
 import { getLengthIndicatorColor, type IndicatorColor } from "@/lib/analysis";
 import { KeywordHighlighter } from "./keyword-highlighter";
+import { SchemaDisplay } from "./schema-display";
 
 interface MetaData {
   title: string;
   description: string;
   image?: string | null;
   faq?: { question: string; answer: string }[] | null;
+  schema?: any[] | null;
   headlines?: HeadlineNode[] | null;
   keyword?: string | null;
   keywordCount?: number | null;
@@ -123,11 +125,18 @@ export function MetaForm() {
       faqColor = "green";
     }
 
+    // Schema Tab
+    let schemaColor: IndicatorColor = "gray";
+    if (metaData.schema && metaData.schema.length > 0) {
+      schemaColor = "green";
+    }
+
     return {
       analysis: analysisColor,
       headlines: headlinesColor,
       images: imagesColor,
       faq: faqColor,
+      schema: schemaColor,
     };
   }, [metaData, editableTitle, editableDescription]);
 
@@ -245,6 +254,12 @@ export function MetaForm() {
                 FAQ
               </TabsTrigger>
             )}
+            {metaData.schema && metaData.schema.length > 0 && (
+              <TabsTrigger value="schema">
+                {tabColors && <TabIndicator color={tabColors.schema} />}
+                Schema
+              </TabsTrigger>
+            )}
           </TabsList>
 
           <TabsContent value="analysis">
@@ -468,6 +483,16 @@ export function MetaForm() {
               </Card>
             </TabsContent>
           )}
+
+          {metaData.schema && metaData.schema.length > 0 && (
+            <TabsContent value="schema">
+              <Card className="w-full shadow-lg rounded-lg">
+                <CardContent className="p-6">
+                  <SchemaDisplay schemas={metaData.schema} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          )}
         </Tabs>
       )}
     </div>