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

[dyad] Redesign image converter layout - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 11:00:40 +01:00
parent 2edde3e39e
commit 0315a9a704
1 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/image-converter.tsx
View File

@@ -19,7 +19,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Upload, Download, Image as ImageIcon, X, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
@@ -39,7 +39,6 @@ export function ImageConverter() {
const fileInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
// Clean up object URLs on component unmount
return () => {
previewUrls.forEach((url) => URL.revokeObjectURL(url));
};
@@ -78,7 +77,9 @@ export function ImageConverter() {
];
const newFilenames = [
...filenames,
...imageFiles.map(file => file.name.substring(0, file.name.lastIndexOf('.')))
...imageFiles.map((file) =>
file.name.substring(0, file.name.lastIndexOf("."))
),
];
setImages(newImages);
@@ -123,7 +124,9 @@ export function ImageConverter() {
setFilenames(newFilenames);
if (selectedImageIndex === indexToRemove) {
setSelectedImageIndex(newImages.length > 0 ? Math.max(0, indexToRemove - 1) : null);
setSelectedImageIndex(
newImages.length > 0 ? Math.max(0, indexToRemove - 1) : null
);
} else if (selectedImageIndex !== null && selectedImageIndex > indexToRemove) {
setSelectedImageIndex(selectedImageIndex - 1);
}
@@ -138,10 +141,12 @@ export function ImageConverter() {
toast.info("All images cleared.");
};
const handleFilenameChange = (e: ChangeEvent<HTMLInputElement>) => {
if (selectedImageIndex === null) return;
const handleFilenameChange = (
e: ChangeEvent<HTMLInputElement>,
index: number
) => {
const newFilenames = [...filenames];
newFilenames[selectedImageIndex] = e.target.value;
newFilenames[index] = e.target.value;
setFilenames(newFilenames);
};
@@ -150,8 +155,11 @@ export function ImageConverter() {
toast.error("Please select an image and set dimensions.");
return;
}
if (!filenames[selectedImageIndex] || filenames[selectedImageIndex].trim() === "") {
toast.error("Please enter a filename.");
if (
!filenames[selectedImageIndex] ||
filenames[selectedImageIndex].trim() === ""
) {
toast.error("Please enter a filename for the selected image.");
return;
}
@@ -194,8 +202,8 @@ export function ImageConverter() {
const isImageSelected = selectedImageIndex !== null;
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
<div className="flex flex-col gap-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full">
<div className="lg:col-span-1 flex flex-col gap-8">
<Card>
<CardHeader>
<CardTitle>Image Settings</CardTitle>
@@ -225,23 +233,26 @@ export function ImageConverter() {
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="filename">Filename</Label>
<Input
id="filename"
type="text"
placeholder="Enter filename"
value={isImageSelected ? filenames[selectedImageIndex] : ""}
onChange={handleFilenameChange}
disabled={!isImageSelected}
/>
</div>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload Images</Button>
<Button onClick={handleConvertAndDownload} disabled={!isImageSelected || isConverting}><Download className="mr-2 h-4 w-4" />{isConverting ? "Converting..." : "Convert & Download"}</Button>
<Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
<Button onClick={handleConvertAndDownload} disabled={!isImageSelected || isConverting}><Download className="mr-2 h-4 w-4" />{isConverting ? "Converting..." : "Download"}</Button>
</CardFooter>
</Card>
</div>
<div className="lg:col-span-2 flex flex-col gap-8">
<div className={cn("w-full aspect-video rounded-md border flex items-center justify-center bg-gray-100 dark:bg-gray-800 relative transition-colors", isDraggingOver && "border-primary bg-primary/10")} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}>
{isImageSelected && previewUrls[selectedImageIndex] ? (
<img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain" />
) : (
<div className="w-full h-full border-2 border-dashed rounded-md flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50" onClick={() => fileInputRef.current?.click()}>
<ImageIcon className="w-12 h-12 mb-2" />
<span>Click or drag & drop images here</span>
</div>
)}
<Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
</div>
{hasImages && (
<Card>
@@ -252,35 +263,31 @@ export function ImageConverter() {
</div>
</CardHeader>
<CardContent>
<ScrollArea className="w-full whitespace-nowrap">
<div className="flex space-x-4 pb-4">
<ScrollArea className="h-[400px] pr-4">
<div className="space-y-4">
{previewUrls.map((url, index) => (
<div key={url} className="relative shrink-0">
<button onClick={() => setSelectedImageIndex(index)} className={cn("w-24 h-24 rounded-md overflow-hidden border-2 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", selectedImageIndex === index ? "border-primary" : "border-transparent")}>
<img src={url} alt={`Preview ${index + 1}`} className="w-full h-full object-cover" />
</button>
<Button variant="destructive" size="icon" className="absolute -top-2 -right-2 h-6 w-6 rounded-full" onClick={() => handleRemoveImage(index)}><X className="h-4 w-4" /></Button>
<div key={url} className={cn("p-4 border rounded-lg flex items-center gap-4 cursor-pointer transition-all", selectedImageIndex === index && "ring-2 ring-primary shadow-md")} onClick={() => setSelectedImageIndex(index)}>
<img src={url} alt={`Preview ${index + 1}`} className="w-20 h-20 object-cover rounded-md shrink-0" />
<div className="flex-1 space-y-2 min-w-0">
<p className="text-sm font-medium truncate text-gray-700 dark:text-gray-300" title={images[index].name}>
Source: {images[index].name}
</p>
<div className="space-y-1">
<Label htmlFor={`filename-${index}`} className="text-xs font-semibold">New Filename</Label>
<Input id={`filename-${index}`} type="text" placeholder="Enter new filename" value={filenames[index]} onChange={(e) => handleFilenameChange(e, index)} onClick={(e) => e.stopPropagation()} />
</div>
</div>
<Button variant="ghost" size="icon" className="shrink-0 text-gray-500 hover:text-destructive" onClick={(e) => { e.stopPropagation(); handleRemoveImage(index); }}>
<X className="h-4 w-4" />
</Button>
</div>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</CardContent>
</Card>
)}
</div>
<div className={cn("w-full aspect-video rounded-md border flex items-center justify-center bg-gray-100 dark:bg-gray-800 relative transition-colors", isDraggingOver && "border-primary bg-primary/10")} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}>
{isImageSelected && previewUrls[selectedImageIndex] ? (
<img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain" />
) : (
<div className="w-full h-full border-2 border-dashed rounded-md flex flex-col items-center justify-center text-gray-500 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50" onClick={() => fileInputRef.current?.click()}>
<ImageIcon className="w-12 h-12 mb-2" />
<span>Click or drag & drop images here</span>
</div>
)}
<Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
</div>
</div>
);
}