[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>

src/components/schema-display.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { CopyButton } from "./copy-button";
+
+interface SchemaDisplayProps {
+  schemas: any[];
+}
+
+export function SchemaDisplay({ schemas }: SchemaDisplayProps) {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      {schemas.map((schema, index) => {
+        const schemaType = schema["@type"] || `Schema Block ${index + 1}`;
+        const schemaJson = JSON.stringify(schema, null, 2);
+
+        return (
+          <AccordionItem value={`item-${index}`} key={index}>
+            <AccordionTrigger>{schemaType}</AccordionTrigger>
+            <AccordionContent>
+              <div className="relative bg-muted/50 p-4 rounded-md">
+                <div className="absolute top-2 right-2">
+                  <CopyButton textToCopy={schemaJson} />
+                </div>
+                <pre className="text-sm overflow-x-auto">
+                  <code>{schemaJson}</code>
+                </pre>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
+  );
+}