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

src/components/serp-preview.tsx

@@ -1,14 +1,21 @@
 "use client";
 
 import { Globe } from "lucide-react";
+import { KeywordHighlighter } from "./keyword-highlighter";
 
 interface SerpPreviewProps {
   title: string;
   description: string;
   url: string;
+  keyword?: string | null;
 }
 
-export function SerpPreview({ title, description, url }: SerpPreviewProps) {
+export function SerpPreview({
+  title,
+  description,
+  url,
+  keyword,
+}: SerpPreviewProps) {
   const formatUrl = (fullUrl: string) => {
     try {
       let formattedUrl = fullUrl;
@@ -18,7 +25,7 @@ export function SerpPreview({ title, description, url }: SerpPreviewProps) {
       const urlObject = new URL(formattedUrl);
       const path = urlObject.pathname === "/" ? "" : urlObject.pathname;
       // remove trailing slash
-      const displayPath = path.endsWith('/') ? path.slice(0, -1) : path;
+      const displayPath = path.endsWith("/") ? path.slice(0, -1) : path;
       return `${urlObject.hostname}${displayPath}`;
     } catch (error) {
       return fullUrl;
@@ -41,11 +48,16 @@ export function SerpPreview({ title, description, url }: SerpPreviewProps) {
         </div>
       </div>
       <h3 className="text-xl text-blue-600 dark:text-blue-400 mt-2 truncate font-medium">
-        {title || "Meta Title Preview"}
+        <KeywordHighlighter text={title || "Meta Title Preview"} keyword={keyword} />
       </h3>
       <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
-        {description ||
-          "This is where the meta description will be displayed. It provides a brief summary of the page's content for search engine users."}
+        <KeywordHighlighter
+          text={
+            description ||
+            "This is where the meta description will be displayed. It provides a brief summary of the page's content for search engine users."
+          }
+          keyword={keyword}
+        />
       </p>
     </div>
   );