96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Edit, Trash2 } from "lucide-react";
|
|
|
|
interface TreeItemRowProps {
|
|
icon?: React.ReactNode;
|
|
title: string;
|
|
subtitle?: string;
|
|
badges?: Array<{
|
|
text: string;
|
|
variant?: "default" | "secondary" | "destructive" | "outline";
|
|
className?: string;
|
|
}>;
|
|
onEdit?: () => void;
|
|
onDelete?: () => void;
|
|
canDelete?: boolean;
|
|
showSeparator?: boolean;
|
|
additionalInfo?: React.ReactNode;
|
|
}
|
|
|
|
export function TreeItemRow({
|
|
icon,
|
|
title,
|
|
subtitle,
|
|
badges = [],
|
|
onEdit,
|
|
onDelete,
|
|
canDelete = true,
|
|
showSeparator = false,
|
|
additionalInfo,
|
|
}: TreeItemRowProps) {
|
|
return (
|
|
<div>
|
|
{/* Séparateur entre items */}
|
|
{showSeparator && <div className="border-t border-white/5 ml-12" />}
|
|
|
|
<div className="flex items-center justify-between p-2 ml-6 border-l-2 border-slate-700/50 hover:bg-white/5 transition-colors">
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
{icon}
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
<h4 className="text-sm font-medium text-white truncate">{title}</h4>
|
|
{badges.map((badge, index) => (
|
|
<Badge
|
|
key={index}
|
|
variant={badge.variant || "outline"}
|
|
className={`text-xs px-2 py-0.5 shrink-0 ${
|
|
badge.className || ""
|
|
}`}
|
|
>
|
|
{badge.text}
|
|
</Badge>
|
|
))}
|
|
{subtitle && (
|
|
<p className="text-slate-400 text-xs truncate flex-1">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Informations additionnelles (comme les métriques) */}
|
|
{additionalInfo && (
|
|
<div className="mx-4 shrink-0">{additionalInfo}</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex items-center gap-1 shrink-0">
|
|
{onEdit && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onEdit}
|
|
className="text-blue-400 hover:text-blue-300 hover:bg-blue-500/20 h-6 w-6 p-0"
|
|
>
|
|
<Edit className="w-3 h-3" />
|
|
</Button>
|
|
)}
|
|
{onDelete && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onDelete}
|
|
className="text-red-400 hover:text-red-300 hover:bg-red-500/20 h-6 w-6 p-0"
|
|
disabled={!canDelete}
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|