Function Progress

console/src/platform/shell/Tutorial.tsx:1416–1452

({ min, max, value, onStepClick, ...rest }: ProgressProps)

const PROGRESS_STEP_SPACING = 1;

const Progress = ({ min, max, value, onStepClick, ...rest }: ProgressProps) => {
  const { colors } = useTheme<MaterializeTheme>();
  const steps: boolean[] = [];

  for (let i = min; i < max; i++) {
    steps.push(i <= value);
  }

  return (
    <HStack {...rest} spacing={PROGRESS_STEP_SPACING}>
      {steps.map((filled, idx) => {
        return (
          <Box
            key={idx}
            flexGrow="1"
            height="1"
            borderRadius="2px"
            transition="all 0.2s"
            bgColor={filled ? colors.accent.purple : colors.background.tertiary}
            onClick={() => onStepClick(idx)}
            cursor={value !== idx ? "pointer" : "auto"}
            title={value !== idx ? `Jump to step ${idx + 1}` : ""}
            sx={{
              _hover: {
                backgroundColor: colors.accent.purple,
                boxShadow:
                  value !== idx
                    ? `0px 0px 3px 1px ${colors.accent.purple}`
                    : "none",
              },
            }}
          />
        );
      })}
    </HStack>
  );
};

type TutorialProps = GridItemProps & {
  runCommand: (command: string) => void;