72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
|
import { ChevronDown, ChevronRight } from "lucide-react";
|
|
import { SignatureListItem } from "@/components/SignatureListItem";
|
|
import { SignatureCategory } from "@/hooks/useSignatureCategories";
|
|
import { SigviewRecord as Signature } from "@/lib/pbtypes";
|
|
|
|
interface SignatureCategoriesProps {
|
|
categories: SignatureCategory[];
|
|
onToggleCategory: (categoryId: string) => void;
|
|
onDelete?: (signatureId: string) => Promise<void>;
|
|
onUpdate?: (updatedSignature: Partial<Signature>) => Promise<void>;
|
|
}
|
|
|
|
export const SignatureCategories = ({ categories, onToggleCategory, onDelete, onUpdate }: SignatureCategoriesProps) => {
|
|
if (categories.length === 0) {
|
|
return (
|
|
<Card className="bg-slate-800/30 border-slate-700">
|
|
<CardContent className="pt-4 text-center">
|
|
<div className="text-slate-400">No signatures found</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{categories.map((category) => (
|
|
<Card key={category.meta.id} className="bg-slate-800/30 border-slate-700">
|
|
<Collapsible open={category.isVisible} onOpenChange={() => onToggleCategory(category.meta.id)}>
|
|
<CollapsibleTrigger asChild>
|
|
<CardHeader className="cursor-pointer hover:bg-slate-800/50 transition-colors py-2">
|
|
<CardTitle className="text-white flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{category.isVisible ? (
|
|
<ChevronDown className="h-4 w-4 text-slate-400" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4 text-slate-400" />
|
|
)}
|
|
{category.meta.icon}
|
|
<span className="text-base font-medium">{category.meta.name}</span>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={`bg-slate-700 border-slate-600 ${category.meta.color} px-2 py-1`} >
|
|
{category.signatures.length}
|
|
</Badge>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<CardContent className="p-0">
|
|
<div className="divide-y divide-slate-700">
|
|
{category.signatures.map((signature) => (
|
|
<SignatureListItem
|
|
key={signature.id}
|
|
signature={signature}
|
|
onDelete={onDelete}
|
|
onUpdate={onUpdate}
|
|
/>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|