73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
/**
|
|
* Groupe de boutons d'action avec animations et espacement optimisé
|
|
*/
|
|
|
|
import React from 'react';
|
|
import ActionButton from './ActionButton';
|
|
import { ActionButtonType } from './ActionButtonStyles';
|
|
import { ChantierActif } from '../../hooks/useDashboard';
|
|
|
|
interface ActionButtonGroupProps {
|
|
chantier: ChantierActif;
|
|
actions: ActionButtonType[];
|
|
onAction: (action: ActionButtonType, chantier: ChantierActif) => void;
|
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
orientation?: 'horizontal' | 'vertical';
|
|
spacing?: 'none' | 'sm' | 'md' | 'lg';
|
|
showLabels?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const ActionButtonGroup: React.FC<ActionButtonGroupProps> = ({
|
|
chantier,
|
|
actions,
|
|
onAction,
|
|
size = 'md',
|
|
orientation = 'horizontal',
|
|
spacing = 'sm',
|
|
showLabels = false,
|
|
className = ''
|
|
}) => {
|
|
// Classes pour l'espacement - plus compact
|
|
const spacingClasses = {
|
|
none: 'gap-0',
|
|
sm: 'gap-1',
|
|
md: 'gap-1',
|
|
lg: 'gap-2'
|
|
};
|
|
|
|
// Classes pour l'orientation
|
|
const orientationClasses = {
|
|
horizontal: 'flex-row',
|
|
vertical: 'flex-column'
|
|
};
|
|
|
|
const containerClasses = [
|
|
'flex',
|
|
'align-items-center',
|
|
orientationClasses[orientation],
|
|
spacingClasses[spacing],
|
|
'action-button-group',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<div className={containerClasses}>
|
|
{actions.map((actionType, index) => (
|
|
<ActionButton
|
|
key={`${actionType}-${chantier.id}-${index}`}
|
|
type={actionType}
|
|
size={size}
|
|
showLabel={showLabels}
|
|
onClick={() => onAction(actionType, chantier)}
|
|
className="action-button-group-item"
|
|
// Props pour le menu
|
|
chantier={chantier}
|
|
onMenuAction={actionType === 'MENU' ? onAction : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ActionButtonGroup; |