[dyad] Implemented headline tree structure - wrote 4 file(s), deleted 1 file(s)

src/components/meta-form.tsx

@@ -6,20 +6,20 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Globe, Edit, Check, Loader2, X, ImageOff } from "lucide-react";
-import { extractMetaData } from "@/app/actions";
+import { extractMetaData, type HeadlineNode } from "@/app/actions";
 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";
-import { HeadlinesDisplay } from "./headlines-display";
+import { HeadlineTree } from "./headline-tree";
 
 interface MetaData {
   title: string;
   description: string;
   image?: string | null;
   faq?: { question: string; answer: string }[] | null;
-  headlines?: { tag: string; text: string; length: number }[] | null;
+  headlines?: HeadlineNode[] | null;
 }
 
 export function MetaForm() {
@@ -283,11 +283,11 @@ export function MetaForm() {
             <Card className="w-full shadow-lg rounded-lg">
               <CardHeader>
                 <CardTitle className="text-xl text-card-foreground">
-                  Headlines
+                  Headlines Structure
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <HeadlinesDisplay headlines={metaData.headlines} />
+                <HeadlineTree headlines={metaData.headlines} />
               </CardContent>
             </Card>
           )}