Initial commit

components/chantiers/ActionButtonGroup.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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;