[dyad] Added 'nofollow' warning to links - wrote 1 file(s)

src/components/links-display.tsx

@@ -12,7 +12,13 @@ import {
 } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { ExternalLink, Link as LinkIcon } from "lucide-react";
+import { ExternalLink, Link as LinkIcon, AlertTriangle } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import type { LinkData } from "@/app/actions";
 
 interface LinksDisplayProps {
@@ -88,14 +94,18 @@ export function LinksDisplay({ links }: LinksDisplayProps) {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredLinks.map((link, index) => (
+            {filteredLinks.map((link, index) => {
+              const isMissingNoFollow =
+                link.type === "external" && !link.rel.includes("nofollow");
+              return (
                 <TableRow key={index}>
                   <TableCell className="max-w-xs truncate">
+                    <div className="flex items-center justify-between gap-2">
                       <a
                         href={link.href}
                         target="_blank"
                         rel="noopener noreferrer"
-                    className="flex items-center gap-2 hover:underline"
+                        className="flex items-center gap-2 hover:underline min-w-0"
                       >
                         {link.type === "external" ? (
                           <ExternalLink className="h-4 w-4 flex-shrink-0" />
@@ -104,6 +114,21 @@ export function LinksDisplay({ links }: LinksDisplayProps) {
                         )}
                         <span className="truncate">{link.href}</span>
                       </a>
+                      {isMissingNoFollow && (
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger>
+                              <AlertTriangle className="h-4 w-4 text-orange-500 flex-shrink-0" />
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>
+                                External link without 'nofollow' attribute.
+                              </p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      )}
+                    </div>
                   </TableCell>
                   <TableCell>{link.text || "No anchor text"}</TableCell>
                   <TableCell className="text-center">
@@ -125,7 +150,8 @@ export function LinksDisplay({ links }: LinksDisplayProps) {
                     )}
                   </TableCell>
                 </TableRow>
-            ))}
+              );
+            })}
           </TableBody>
         </Table>
       </Card>