[dyad] Extended keyword highlighting - wrote 3 file(s)

src/components/headline-tree.tsx

@@ -2,17 +2,21 @@
 
 import { Badge } from "@/components/ui/badge";
 import type { HeadlineNode } from "@/app/actions";
+import { KeywordHighlighter } from "./keyword-highlighter";
 
 interface HeadlineTreeProps {
   headlines: HeadlineNode[];
+  keyword?: string | null;
 }
 
 const HeadlineNodeDisplay = ({
   node,
   level,
+  keyword,
 }: {
   node: HeadlineNode;
   level: number;
+  keyword?: string | null;
 }) => {
   return (
     <>
@@ -26,24 +30,36 @@ const HeadlineNodeDisplay = ({
         >
           {node.tag}
         </Badge>
-        <p className="font-medium flex-grow text-foreground">{node.text}</p>
+        <p className="font-medium flex-grow text-foreground">
+          <KeywordHighlighter text={node.text} keyword={keyword} />
+        </p>
         <p className="text-sm text-muted-foreground flex-shrink-0 w-10 text-right">
           {node.length}
         </p>
       </div>
       {node.children?.map((child, index) => (
-        <HeadlineNodeDisplay key={index} node={child} level={level + 1} />
+        <HeadlineNodeDisplay
+          key={index}
+          node={child}
+          level={level + 1}
+          keyword={keyword}
+        />
       ))}
     </>
   );
 };
 
-export function HeadlineTree({ headlines }: HeadlineTreeProps) {
+export function HeadlineTree({ headlines, keyword }: HeadlineTreeProps) {
   return (
     <div className="w-full rounded-lg overflow-hidden">
       <div className="-mt-px">
         {headlines.map((headline, index) => (
-          <HeadlineNodeDisplay key={index} node={headline} level={0} />
+          <HeadlineNodeDisplay
+            key={index}
+            node={headline}
+            level={0}
+            keyword={keyword}
+          />
         ))}
       </div>
     </div>