hunk.code_window: import { useColumns } from '@/react/docker/containers/ListView/ContainersDatatable/columns';
   import { ContainersDatatableActions } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions';
   import { ContainersDatatableSettings } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings';
   import { Datatable, TableSettingsMenu } from '@@/datatables';
   import {
     buildAction,
     QuickActionsSettings,
  
hunk.labels: keep keep add keep keep keep keep keep
hunk.after_edit: import { useShowGPUsColumn } from '@/react/docker/containers/utils';
  
hunk.file_path: app/react/docker/stacks/ItemView/StackContainersDatatable.tsx
hunk.type: add
file: import clsx from 'clsx';
  
  import styles from './Stepper.module.css';
  
  export interface Step {
    title: string;
  }
  
  interface Props {
    currentStep: number;
    steps: Step[];
  }
  
  export function Stepper({ currentStep, steps }: Props) {
    return (
      <div className={styles.stepperWrapper}>
        {steps.map((step, index) => (
          <div
            key={step.title}
            className={clsx(styles.stepWrapper, {
              [styles.active]: index + 1 === currentStep,
              [styles.completed]: index + 1 < currentStep,
            })}
          >
            <div className={styles.step}>
              <div className={styles.stepCounter}>{index + 1}</div>
              <div className={styles.stepName}>{step.title}</div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  