[dyad] Added image alt tag analysis - wrote 3 file(s)

src/components/image-alt-display.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import type { ImageAltData } from "@/app/actions";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { ImageOff } from "lucide-react";
+
+interface ImageAltDisplayProps {
+  images: ImageAltData[];
+}
+
+export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
+  const [showMissingOnly, setShowMissingOnly] = useState(false);
+  const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({});
+
+  const filteredImages = showMissingOnly
+    ? images.filter((img) => !img.alt)
+    : images;
+
+  const handleImageError = (src: string) => {
+    setImageErrors((prev) => ({ ...prev, [src]: true }));
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id="missing-alt"
+          checked={showMissingOnly}
+          onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
+        />
+        <Label htmlFor="missing-alt">
+          Show only images with missing alt text
+        </Label>
+      </div>
+      <div className="space-y-4">
+        {filteredImages.map((image, index) => (
+          <div
+            key={index}
+            className="flex items-start gap-4 p-4 border rounded-lg"
+          >
+            <div className="w-24 h-24 flex-shrink-0 bg-muted rounded-md flex items-center justify-center overflow-hidden">
+              {imageErrors[image.src] ? (
+                <ImageOff className="h-8 w-8 text-muted-foreground" />
+              ) : (
+                <img
+                  src={image.src}
+                  alt={image.alt || "Image preview"}
+                  className="w-full h-full object-cover"
+                  onError={() => handleImageError(image.src)}
+                />
+              )}
+            </div>
+            <div className="flex-grow">
+              <p className="text-sm text-muted-foreground break-all">
+                {image.src}
+              </p>
+              <div className="mt-2">
+                {image.alt ? (
+                  <p className="text-sm text-foreground bg-muted/50 p-2 rounded-md">
+                    <span className="font-semibold">Alt:</span> {image.alt}
+                  </p>
+                ) : (
+                  <Badge variant="destructive">Missing alt text</Badge>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}