83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import { Pencil, Trash2 } from "lucide-react";
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
import type { Category } from "@/lib/types";
|
|
|
|
interface CategoryCardProps {
|
|
category: Category;
|
|
stats: { total: number; count: number };
|
|
formatCurrency: (amount: number) => string;
|
|
onEdit: (category: Category) => void;
|
|
onDelete: (categoryId: string) => void;
|
|
}
|
|
|
|
export function CategoryCard({
|
|
category,
|
|
stats,
|
|
formatCurrency,
|
|
onEdit,
|
|
onDelete,
|
|
}: CategoryCardProps) {
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<div className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-muted/50 transition-colors group">
|
|
<div className="flex items-center gap-2 min-w-0 flex-1">
|
|
<div
|
|
className="w-4 h-4 md:w-5 md:h-5 rounded-full flex items-center justify-center shrink-0"
|
|
style={{ backgroundColor: `${category.color}20` }}
|
|
>
|
|
<CategoryIcon
|
|
icon={category.icon}
|
|
color={category.color}
|
|
size={isMobile ? 10 : 12}
|
|
/>
|
|
</div>
|
|
<span className="text-xs md:text-sm truncate">{category.name}</span>
|
|
{!isMobile && (
|
|
<span className="text-xs md:text-sm text-muted-foreground shrink-0">
|
|
{stats.count} opération{stats.count > 1 ? "s" : ""} •{" "}
|
|
{formatCurrency(stats.total)}
|
|
</span>
|
|
)}
|
|
{isMobile && (
|
|
<span className="text-[10px] md:text-xs text-muted-foreground shrink-0">
|
|
{stats.count} 💳
|
|
</span>
|
|
)}
|
|
{category.keywords.length > 0 && (
|
|
<Badge
|
|
variant="outline"
|
|
className="text-[10px] px-1 md:px-1.5 py-0 h-3 md:h-4 shrink-0"
|
|
>
|
|
{category.keywords.length}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center shrink-0 opacity-0 group-hover:opacity-100 md:opacity-100 transition-opacity">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 md:h-6 md:w-6"
|
|
onClick={() => onEdit(category)}
|
|
>
|
|
<Pencil className="w-3 h-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 md:h-6 md:w-6 text-destructive hover:text-destructive"
|
|
onClick={() => onDelete(category.id)}
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|