[dyad] Added social media tag analysis - wrote 5 file(s)

src/components/meta-form.tsx

@@ -13,6 +13,7 @@ import { getLengthIndicatorColor, type IndicatorColor } from "@/lib/analysis";
 import { SchemaDisplay } from "./schema-display";
 import { MetaFormInputs } from "./meta-form-inputs";
 import { AnalysisTab } from "./analysis-tab";
+import { SocialTab } from "./social-tab";
 import type { MetaData } from "@/lib/types";
 
 export function MetaForm() {
@@ -90,6 +91,23 @@ export function MetaForm() {
       }
     }
 
+    // Social Tab
+    let socialColor: IndicatorColor = "gray";
+    if (metaData.openGraph && metaData.twitter) {
+      const og = metaData.openGraph;
+      const tw = metaData.twitter;
+      const hasOgBasics = og.title && og.description && og.image;
+      const hasTwBasics = tw.card && tw.title && tw.description && tw.image;
+
+      if (hasOgBasics && hasTwBasics) {
+        socialColor = "green";
+      } else if (hasOgBasics || (tw.card && tw.title)) {
+        socialColor = "yellow";
+      } else {
+        socialColor = "red";
+      }
+    }
+
     // FAQ Tab
     let faqColor: IndicatorColor = "gray";
     if (metaData.faq && metaData.faq.length > 0) {
@@ -106,6 +124,7 @@ export function MetaForm() {
       analysis: analysisColor,
       headlines: headlinesColor,
       images: imagesColor,
+      social: socialColor,
       faq: faqColor,
       schema: schemaColor,
     };
@@ -181,6 +200,12 @@ export function MetaForm() {
                 Images
               </TabsTrigger>
             )}
+            {metaData.openGraph && metaData.twitter && (
+              <TabsTrigger value="social">
+                {tabColors && <TabIndicator color={tabColors.social} />}
+                Social
+              </TabsTrigger>
+            )}
             {metaData.faq && metaData.faq.length > 0 && (
               <TabsTrigger value="faq">
                 {tabColors && <TabIndicator color={tabColors.faq} />}
@@ -238,6 +263,15 @@ export function MetaForm() {
             </TabsContent>
           )}
 
+          {metaData.openGraph && metaData.twitter && (
+            <TabsContent value="social">
+              <SocialTab
+                openGraph={metaData.openGraph}
+                twitter={metaData.twitter}
+              />
+            </TabsContent>
+          )}
+
           {metaData.faq && metaData.faq.length > 0 && (
             <TabsContent value="faq">
               <Card className="w-full shadow-lg rounded-lg">