93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
import { Pencil, Trash2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { Transformer } from "@/types";
|
|
|
|
interface TransformerListProps {
|
|
transformers: Transformer[];
|
|
onEdit: (index: number) => void;
|
|
onRemove: (index: number) => void;
|
|
}
|
|
|
|
export function TransformerList({ transformers, onEdit, onRemove }: TransformerListProps) {
|
|
// Handle case where transformers might be null or undefined
|
|
if (!transformers || !Array.isArray(transformers)) {
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-center rounded-md border bg-white p-8 text-gray-500">
|
|
No transformers configured
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{transformers.map((transformer, index) => {
|
|
// Handle case where individual transformer might be null or undefined
|
|
if (!transformer) {
|
|
return (
|
|
<div key={index} className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]">
|
|
<div className="flex-1 space-y-1.5">
|
|
<p className="text-md font-semibold text-gray-800">Invalid Transformer</p>
|
|
<p className="text-sm text-gray-500">Transformer data is missing</p>
|
|
</div>
|
|
<div className="ml-4 flex flex-shrink-0 items-center gap-2">
|
|
<Button variant="ghost" size="icon" onClick={() => onEdit(index)} className="transition-all-ease hover:scale-110" disabled>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="destructive" size="icon" onClick={() => onRemove(index)} className="transition-all duration-200 hover:scale-110">
|
|
<Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Handle case where transformer.path might be null or undefined
|
|
const transformerPath = transformer.path || "Unnamed Transformer";
|
|
|
|
// Handle case where transformer.parameters might be null or undefined
|
|
const options = transformer.options || {};
|
|
|
|
// Render parameters as tags in a single line
|
|
const renderParameters = () => {
|
|
if (!options || Object.keys(options).length === 0) {
|
|
return <p className="text-sm text-gray-500">No parameters configured</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-2 max-h-8 overflow-hidden">
|
|
{Object.entries(options).map(([key, value]) => (
|
|
<span
|
|
key={key}
|
|
className="inline-flex items-center px-2 py-1 rounded-md bg-gray-100 text-xs font-medium text-gray-700 border"
|
|
>
|
|
<span className="text-gray-600">{key}:</span>
|
|
<span className="ml-1 text-gray-800">{String(value)}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div key={index} className="flex items-start justify-between rounded-md border bg-white p-4 transition-all hover:shadow-md animate-slide-in hover:scale-[1.01]">
|
|
<div className="flex-1 space-y-1.5">
|
|
<p className="text-md font-semibold text-gray-800">{transformerPath}</p>
|
|
{renderParameters()}
|
|
</div>
|
|
<div className="ml-4 flex flex-shrink-0 items-center gap-2">
|
|
<Button variant="ghost" size="icon" onClick={() => onEdit(index)} className="transition-all-ease hover:scale-110">
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="destructive" size="icon" onClick={() => onRemove(index)} className="transition-all duration-200 hover:scale-110">
|
|
<Trash2 className="h-4 w-4 text-current transition-colors duration-200" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|