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

[dyad] Updated image upload component design - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 12:19:07 +01:00
parent 5fe444bb72
commit b90d04e432
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -510,23 +510,30 @@ export function ImageConverter() {
</div> </div>
<div className="lg:col-span-2 flex flex-col gap-8"> <div className="lg:col-span-2 flex flex-col gap-8">
<div <Card>
className={cn( <CardContent className="pt-6">
"w-full aspect-video rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors p-1 cursor-pointer", <div className="space-y-4">
isDraggingOver ? "border-primary bg-accent" : "border-input" <h3 className="text-lg font-medium">Upload Images</h3>
)} <div
onDragOver={handleDragOver} className={cn(
onDragLeave={handleDragLeave} "w-full h-48 rounded-lg border-2 border-dashed flex items-center justify-center relative transition-colors cursor-pointer hover:border-primary/60",
onDrop={handleDrop} isDraggingOver ? "border-primary bg-accent" : "border-input"
onClick={() => fileInputRef.current?.click()} )}
> onDragOver={handleDragOver}
<div className="flex flex-col items-center justify-center text-center text-muted-foreground"> onDragLeave={handleDragLeave}
<Upload className="w-10 h-10 mb-4" /> onDrop={handleDrop}
<p className="text-lg font-semibold">Click to upload or drag and drop</p> onClick={() => fileInputRef.current?.click()}
<p className="text-sm">Select files from your computer</p> >
</div> <div className="flex flex-col items-center justify-center text-center text-muted-foreground">
<Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple /> <Upload className="w-8 h-8 mb-2" />
</div> <p className="font-semibold">Click or drag and drop to upload</p>
<p className="text-xs text-muted-foreground mt-1">PNG, JPG, WEBP supported</p>
</div>
<Input type="file" ref={fileInputRef} onChange={handleImageChange} className="hidden" accept="image/*" multiple />
</div>
</div>
</CardContent>
</Card>
{hasImages && ( {hasImages && (
<Card> <Card>