pascallinxweiler/Metify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[dyad] Improved image analysis UI layout - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-20 14:27:20 +01:00
parent 4fa32b38cf
commit 53ff7d8301
1 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/image-alt-display.tsx
View File

@@ -66,6 +66,18 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-muted/50 rounded-lg"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-muted/50 rounded-lg">
<div className="flex flex-col sm:flex-row sm:items-center gap-4"> <div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div>
{missingAltCount > 0 ? (
<p className="text-sm font-medium text-destructive">
<span className="font-bold">{missingAltCount}</span> of{" "}
{images.length} images are missing alt text.
</p>
) : (
<p className="text-sm font-medium text-green-600">
Great! All {images.length} images have alt text.
</p>
)}
</div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
id="missing-alt" id="missing-alt"
@@ -74,6 +86,7 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
/> />
<Label htmlFor="missing-alt">Show only missing alt text</Label> <Label htmlFor="missing-alt">Show only missing alt text</Label>
</div> </div>
</div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Label htmlFor="sort-order" className="text-sm flex-shrink-0"> <Label htmlFor="sort-order" className="text-sm flex-shrink-0">
Sort by: Sort by:
@@ -95,19 +108,6 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
</Select> </Select>
</div> </div>
</div> </div>
<div>
{missingAltCount > 0 ? (
<p className="text-sm font-medium text-destructive">
<span className="font-bold">{missingAltCount}</span> of{" "}
{images.length} images are missing alt text.
</p>
) : (
<p className="text-sm font-medium text-green-600">
Great! All {images.length} images have alt text.
</p>
)}
</div>
</div>
<div className="space-y-4"> <div className="space-y-4">
{sortedAndFilteredImages.map((image, index) => ( {sortedAndFilteredImages.map((image, index) => (
<div <div