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

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

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