[dyad] Make settings panels collapsible - wrote 1 file(s)
This commit is contained in:
[dyad]
@@ -24,6 +24,12 @@ import { Upload, Download, X, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
export function ImageConverter() {
|
||||
const [images, setImages] = useState<File[]>([]);
|
||||
@@ -35,7 +41,7 @@ export function ImageConverter() {
|
||||
|
||||
const [prefix, setPrefix] = useState<string>("");
|
||||
const [suffix, setSuffix] = useState<string>("");
|
||||
const [useCounter, setUseCounter] = useState<boolean>(true);
|
||||
const [useCounter, setUseCounter] = useState<boolean>(false);
|
||||
const [counterDigits, setCounterDigits] = useState<number>(3);
|
||||
|
||||
const [isConverting, setIsConverting] = useState(false);
|
||||
@@ -189,80 +195,94 @@ export function ImageConverter() {
|
||||
|
||||
return (
|
||||
<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>
|
||||
<CardDescription>
|
||||
Adjust resolution and format for all uploaded images.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<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} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<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} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="format">Format</Label>
|
||||
<Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)} disabled={!hasImages}>
|
||||
<SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="png">PNG</SelectItem>
|
||||
<SelectItem value="jpeg">JPEG</SelectItem>
|
||||
<SelectItem value="webp">WEBP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
|
||||
<Button onClick={handleConvertAndDownload} disabled={!hasImages || !width || !height || isConverting}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{isConverting ? "Converting..." : `Download All (${images.length})`}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<div className="lg:col-span-1 flex flex-col">
|
||||
<Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
|
||||
<Card>
|
||||
<AccordionItem value="image-settings" className="border-none">
|
||||
<AccordionTrigger className="p-6 hover:no-underline">
|
||||
<div className="text-left">
|
||||
<CardTitle>Image Settings</CardTitle>
|
||||
<CardDescription className="mt-1">
|
||||
Adjust resolution and format for all uploaded images.
|
||||
</CardDescription>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-6 pb-6">
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<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} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<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} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="format">Format</Label>
|
||||
<Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)} disabled={!hasImages}>
|
||||
<SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="png">PNG</SelectItem>
|
||||
<SelectItem value="jpeg">JPEG</SelectItem>
|
||||
<SelectItem value="webp">WEBP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<CardFooter className="px-0 pt-6 pb-0 flex justify-between">
|
||||
<Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
|
||||
<Button onClick={handleConvertAndDownload} disabled={!hasImages || !width || !height || isConverting}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{isConverting ? "Converting..." : `Download All (${images.length})`}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Filename Settings</CardTitle>
|
||||
<CardDescription>Customize the output filenames.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="prefix">Prefix</Label>
|
||||
<Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} disabled={!hasImages} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="suffix">Suffix</Label>
|
||||
<Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} disabled={!hasImages} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 pt-2">
|
||||
<Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} disabled={!hasImages} />
|
||||
<Label htmlFor="use-counter">Add sequential number</Label>
|
||||
</div>
|
||||
{useCounter && (
|
||||
<div className="space-y-2 pl-8">
|
||||
<Label htmlFor="counter-digits">Number of digits</Label>
|
||||
<Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))} disabled={!hasImages}>
|
||||
<SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1 (e.g., 1)</SelectItem>
|
||||
<SelectItem value="2">2 (e.g., 01)</SelectItem>
|
||||
<SelectItem value="3">3 (e.g., 001)</SelectItem>
|
||||
<SelectItem value="4">4 (e.g., 0001)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<AccordionItem value="filename-settings" className="border-none">
|
||||
<AccordionTrigger className="p-6 hover:no-underline">
|
||||
<div className="text-left">
|
||||
<CardTitle>Filename Settings</CardTitle>
|
||||
<CardDescription className="mt-1">Customize the output filenames.</CardDescription>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-6 pb-6">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="prefix">Prefix</Label>
|
||||
<Input id="prefix" placeholder="e.g., travel-" value={prefix} onChange={(e) => setPrefix(e.target.value)} disabled={!hasImages} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="suffix">Suffix</Label>
|
||||
<Input id="suffix" placeholder="e.g., -edit" value={suffix} onChange={(e) => setSuffix(e.target.value)} disabled={!hasImages} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 pt-2">
|
||||
<Switch id="use-counter" checked={useCounter} onCheckedChange={setUseCounter} disabled={!hasImages} />
|
||||
<Label htmlFor="use-counter">Add sequential number</Label>
|
||||
</div>
|
||||
{useCounter && (
|
||||
<div className="space-y-2 pl-8">
|
||||
<Label htmlFor="counter-digits">Number of digits</Label>
|
||||
<Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))} disabled={!hasImages}>
|
||||
<SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">1 (e.g., 1)</SelectItem>
|
||||
<SelectItem value="2">2 (e.g., 01)</SelectItem>
|
||||
<SelectItem value="3">3 (e.g., 001)</SelectItem>
|
||||
<SelectItem value="4">4 (e.g., 0001)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Card>
|
||||
</Accordion>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2 flex flex-col gap-8">
|
||||
|
||||
Reference in New Issue
Block a user