function StepperProto()

in packages/palette-mantine-core/palette.tsx [2375:2409]

• 33 lines of code
• 3 McCabe index (conditional complexity)

function StepperProto() {
  const [active, setActive] = useState(1);
  const nextStep = () =>
    setActive((current) => (current < 3 ? current + 1 : current));
  const prevStep = () =>
    setActive((current) => (current > 0 ? current - 1 : current));

  return (
    <>
      <Stepper active={active} onStepClick={setActive} breakpoint="sm">
        <Stepper.Step label="First step" description="Your description">
          Step 1 content
        </Stepper.Step>
        <Stepper.Step
          label="Second step"
          description="Your description"
          loading
        >
          Step 2 content
        </Stepper.Step>
        <Stepper.Step label="Final step" description="Your description">
          Step 3 content
        </Stepper.Step>
        <Stepper.Completed>Completed</Stepper.Completed>
      </Stepper>

      <Group position="center" mt="xl">
        <Button variant="default" onClick={prevStep}>
          Back
        </Button>
        <Button onClick={nextStep}>Next step</Button>
      </Group>
    </>
  );
}