eac9e9a0bb
- Marked several UI/UX tasks as complete in TODO.md, including improvements for Kanban icons, tag visibility, recent tasks display, and header responsiveness. - Updated PriorityDistributionChart to adjust height for better layout. - Refined IntegrationFilter to improve filter display and added new trigger class for dropdowns. - Replaced RecentTaskTimeline with TaskCard in RecentTasks for better consistency. - Enhanced TagDistributionChart with improved tooltip and legend styling. - Updated DesktopControls and MobileControls to use lucide-react icons for filters and search functionality. - Removed RecentTaskTimeline component for cleaner codebase.
79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import { ButtonHTMLAttributes, forwardRef } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'accent' | 'secondary' | 'warning' | 'cyan';
|
|
size?: 'sm' | 'md';
|
|
isActive?: boolean;
|
|
icon?: React.ReactNode;
|
|
count?: number;
|
|
}
|
|
|
|
const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
|
|
({ className, variant = 'primary', size = 'md', isActive = false, icon, count, children, ...props }, ref) => {
|
|
const variants = {
|
|
primary: isActive
|
|
? 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)]'
|
|
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50',
|
|
accent: isActive
|
|
? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30'
|
|
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50',
|
|
secondary: isActive
|
|
? 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)]'
|
|
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50',
|
|
warning: isActive
|
|
? 'bg-[color-mix(in_srgb,var(--primary)_15%,transparent)] text-[var(--foreground)] border border-[var(--primary)]'
|
|
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50',
|
|
cyan: isActive
|
|
? 'bg-[var(--cyan)]/20 text-[var(--cyan)] border border-[var(--cyan)]/30'
|
|
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--cyan)]/50'
|
|
};
|
|
|
|
// Déterminer si c'est un bouton avec seulement des icônes
|
|
const isIconOnly = icon && !children && count === undefined;
|
|
|
|
const sizes = {
|
|
sm: isIconOnly ? 'px-2 py-[5px] text-sm h-[34px]' : 'px-3 py-[5px] text-sm h-[34px]',
|
|
md: isIconOnly ? 'px-2 py-[5px] text-sm h-[34px]' : 'px-3 py-[5px] text-sm h-[34px]'
|
|
};
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-md font-mono transition-all',
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{icon && (
|
|
<div className="flex-shrink-0">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
{children && (
|
|
<span className="flex-1 text-left">
|
|
{children}
|
|
{count !== undefined && count > 0 && (
|
|
<span className="ml-1 text-xs opacity-75">
|
|
({count})
|
|
</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
{count !== undefined && count > 0 && !children && (
|
|
<span className="text-xs opacity-75">
|
|
({count})
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
ToggleButton.displayName = 'ToggleButton';
|
|
|
|
export { ToggleButton };
|