88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { ImageFile, ConversionSettings } from "@/types";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Download, Trash2 } from "lucide-react";
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { ImageListItem } from "./image-list-item";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
interface ImageListProps {
|
|
images: ImageFile[];
|
|
settings: ConversionSettings;
|
|
onClearAll: () => void;
|
|
onDownloadAll: () => void;
|
|
onDownloadSingle: (index: number) => void;
|
|
onRemove: (index: number) => void;
|
|
onFilenameChange: (index: number, newName: string) => void;
|
|
isConverting: boolean;
|
|
convertingIndex: number | null;
|
|
}
|
|
|
|
export function ImageList({
|
|
images,
|
|
settings,
|
|
onClearAll,
|
|
onDownloadAll,
|
|
onDownloadSingle,
|
|
onRemove,
|
|
onFilenameChange,
|
|
isConverting,
|
|
convertingIndex,
|
|
}: ImageListProps) {
|
|
const t = useTranslations("ImageList");
|
|
|
|
if (images.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const isProcessing = isConverting || convertingIndex !== null;
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<CardTitle>{t('title')}</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="sm" onClick={onClearAll} disabled={isProcessing}>
|
|
<Trash2 className="mr-2 h-4 w-4" />{t('clearAll')}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent><p>{t('clearAllTooltip')}</p></TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button onClick={onDownloadAll} disabled={isProcessing}>
|
|
<Download className="mr-2 h-4 w-4" />
|
|
{isConverting ? t('converting') : t('downloadAll', { count: images.length })}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent><p>{t('downloadAllTooltip')}</p></TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{images.map((image, index) => (
|
|
<ImageListItem
|
|
key={image.previewUrl}
|
|
image={image}
|
|
index={index}
|
|
settings={settings}
|
|
onFilenameChange={onFilenameChange}
|
|
onRemove={onRemove}
|
|
onDownload={onDownloadSingle}
|
|
isProcessing={isProcessing}
|
|
/>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TooltipProvider>
|
|
);
|
|
} |