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

[dyad] Make settings panels collapsible - wrote 1 file(s)

Browse Source
This commit is contained in:
[dyad]
2026-01-18 11:10:39 +01:00
parent 1a96abc2d1
commit d0573831ec
1 changed files with 94 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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