[dyad] Enable settings before image upload - wrote 1 file(s)

This commit is contained in:
[dyad]
2026-01-18 11:12:11 +01:00
parent d0573831ec
commit 39410d1aa1

View File

@@ -212,16 +212,16 @@ export function ImageConverter() {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="width">Width (px)</Label> <Label htmlFor="width">Width (px)</Label>
<Input id="width" type="number" placeholder="e.g., 1920" value={width} onChange={(e) => setWidth(e.target.value)} disabled={!hasImages} /> <Input id="width" type="number" placeholder="e.g., 1920" value={width} onChange={(e) => setWidth(e.target.value)} />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="height">Height (px)</Label> <Label htmlFor="height">Height (px)</Label>
<Input id="height" type="number" placeholder="e.g., 1080" value={height} onChange={(e) => setHeight(e.target.value)} disabled={!hasImages} /> <Input id="height" type="number" placeholder="e.g., 1080" value={height} onChange={(e) => setHeight(e.target.value)} />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="format">Format</Label> <Label htmlFor="format">Format</Label>
<Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)} disabled={!hasImages}> <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
<SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger> <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="png">PNG</SelectItem> <SelectItem value="png">PNG</SelectItem>
@@ -254,20 +254,20 @@ export function ImageConverter() {
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="prefix">Prefix</Label> <Label htmlFor="prefix">Prefix</Label>
<Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} disabled={!hasImages} /> <Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="suffix">Suffix</Label> <Label htmlFor="suffix">Suffix</Label>
<Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} disabled={!hasImages} /> <Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} />
</div> </div>
<div className="flex items-center space-x-2 pt-2"> <div className="flex items-center space-x-2 pt-2">
<Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} disabled={!hasImages} /> <Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} />
<Label htmlFor="use-counter">Add sequential number</Label> <Label htmlFor="use-counter">Add sequential number</Label>
</div> </div>
{useCounter && ( {useCounter && (
<div className="space-y-2 pl-8"> <div className="space-y-2 pl-8">
<Label htmlFor="counter-digits">Number of digits</Label> <Label htmlFor="counter-digits">Number of digits</Label>
<Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))} disabled={!hasImages}> <Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))}>
<SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger> <SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="1">1 (e.g., 1)</SelectItem> <SelectItem value="1">1 (e.g., 1)</SelectItem>