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

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

@@ -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,15 +195,20 @@ 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">
<div className="lg:col-span-1 flex flex-col">
<Accordion type="single" collapsible defaultValue="image-settings" className="w-full space-y-8">
<Card>
<CardHeader>
<AccordionItem value="image-settings" className="border-none">
<AccordionTrigger className="p-6 hover:no-underline">
<div className="text-left">
<CardTitle>Image Settings</CardTitle>
<CardDescription>
<CardDescription className="mt-1">
Adjust resolution and format for all uploaded images.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
</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>
@@ -219,22 +230,28 @@ export function ImageConverter() {
</SelectContent>
</Select>
</div>
</CardContent>
<CardFooter className="flex justify-between">
</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>
<AccordionItem value="filename-settings" className="border-none">
<AccordionTrigger className="p-6 hover:no-underline">
<div className="text-left">
<CardTitle>Filename Settings</CardTitle>
<CardDescription>Customize the output filenames.</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<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} />
@@ -261,8 +278,11 @@ export function ImageConverter() {
</Select>
</div>
)}
</CardContent>
</div>
</AccordionContent>
</AccordionItem>
</Card>
</Accordion>
</div>
<div className="lg:col-span-2 flex flex-col gap-8">