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

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

@@ -66,6 +66,18 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
<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 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">
<Checkbox
id="missing-alt"
@@ -74,38 +86,26 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
/>
<Label htmlFor="missing-alt">Show only missing alt text</Label>
</div>
<div className="flex items-center gap-2">
<Label htmlFor="sort-order" className="text-sm flex-shrink-0">
Sort by:
</Label>
<Select
value={sortOrder}
onValueChange={(value) =>
setSortOrder(value as "default" | "asc" | "desc")
}
>
<SelectTrigger className="w-full sm:w-[240px]" id="sort-order">
<SelectValue placeholder="Select sort order" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Default Order</SelectItem>
<SelectItem value="desc">Size (Largest to Smallest)</SelectItem>
<SelectItem value="asc">Size (Smallest to Largest)</SelectItem>
</SelectContent>
</Select>
</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 className="flex items-center gap-2">
<Label htmlFor="sort-order" className="text-sm flex-shrink-0">
Sort by:
</Label>
<Select
value={sortOrder}
onValueChange={(value) =>
setSortOrder(value as "default" | "asc" | "desc")
}
>
<SelectTrigger className="w-full sm:w-[240px]" id="sort-order">
<SelectValue placeholder="Select sort order" />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">Default Order</SelectItem>
<SelectItem value="desc">Size (Largest to Smallest)</SelectItem>
<SelectItem value="asc">Size (Smallest to Largest)</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-4">