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

[dyad] Update upload area design - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 11:02:38 +01:00
parent 0315a9a704
commit afedf1ef98
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Upload, Download, Image as ImageIcon, X, Trash2 } from "lucide-react";
import { Upload, Download, X, Trash2 } from "lucide-react";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
@@ -242,13 +242,25 @@ export function ImageConverter() {
</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}>
<div
className={cn(
"w-full aspect-video rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors p-1",
isDraggingOver ? "border-primary bg-accent" : "border-input"
)}
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" />
<img src={previewUrls[selectedImageIndex]} alt="Selected image preview" className="max-w-full max-h-full object-contain rounded-md" />
) : (
<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
className="w-full h-full flex flex-col items-center justify-center text-center cursor-pointer text-muted-foreground hover:text-primary transition-colors"
onClick={() => fileInputRef.current?.click()}
>
<Upload className="w-10 h-10 mb-4" />
<p className="text-lg font-semibold">Click to upload or drag and drop</p>
<p className="text-sm">Select files from your computer</p>
</div>
)}
<Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />