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

src/components/headline-tree.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import type { HeadlineNode } from "@/app/actions";
+
+interface HeadlineTreeProps {
+  headlines: HeadlineNode[];
+}
+
+const HeadlineNodeDisplay = ({
+  node,
+  level,
+}: {
+  node: HeadlineNode;
+  level: number;
+}) => {
+  return (
+    <div className="flex flex-col">
+      <div
+        className="flex items-center gap-3 py-2.5 border-b"
+        style={{ paddingLeft: `${level * 24}px` }}
+      >
+        <Badge
+          variant="secondary"
+          className="uppercase w-12 flex-shrink-0 justify-center font-mono"
+        >
+          {node.tag}
+        </Badge>
+        <p className="font-medium flex-grow text-foreground">{node.text}</p>
+        <p className="text-sm text-muted-foreground flex-shrink-0 w-10 text-right">
+          {node.length}
+        </p>
+      </div>
+      {node.children && node.children.length > 0 && (
+        <div>
+          {node.children.map((child, index) => (
+            <HeadlineNodeDisplay key={index} node={child} level={level + 1} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export function HeadlineTree({ headlines }: HeadlineTreeProps) {
+  return (
+    <div className="w-full border rounded-lg overflow-hidden">
+      {headlines.map((headline, index) => (
+        <HeadlineNodeDisplay key={index} node={headline} level={0} />
+      ))}
+    </div>
+  );
+}