Stepper

import { Box, Stepper, Button } from '@gympass/yoga';

render(() => {
  const [activeStep, setActiveStep] = useState(0);

  const Section = props => (
   <Box
    textAlign="center"
    padding={20}
    {...props}
   />
  );

  const Actions = props => (
   <Box
    display="flex"
    justifyContent="space-between"
    {...props}
   />
  );

  return (
    <Stepper activeStep={activeStep}>
      <Stepper.Step label="Confirm Booking">
        <Section>Confirm booking content</Section>
        <Actions>
          <Button small disabled>
            Previous
          </Button>
          <Button small onClick={() => setActiveStep(1)}>
            Next
          </Button>
        </Actions>
      </Stepper.Step>
      <Stepper.Step label="Class Booked">
        <Section>Class Booked content</Section>
        <Actions>
          <Button small onClick={() => setActiveStep(0)}>
            Previous
          </Button>
          <Button small onClick={() => setActiveStep(2)}>
            Next
          </Button>
        </Actions>
      </Stepper.Step>
      <Stepper.Step label="Check-in">
        <Section>Check-in content</Section>
        <Actions>
          <Button small onClick={() => setActiveStep(1)}>
            Previous
          </Button>
          <Button small disabled>
            Next
          </Button>
        </Actions>
      </Stepper.Step>
    </Stepper>
  );
});
render(() => {
  const [activeStep, setActiveStep] = useState(0);

  const Section = props => (
   <Box
    textAlign="center"
    padding={20}
    {...props}
   />
  );

  const Actions = props => (
   <Box
    display="flex"
    justifyContent="space-between"
    {...props}
   />
  );

  return (
    <Stepper activeStep={activeStep}>
      <Stepper.Step label="Confirm Booking">
        <Section>Confirm booking content</Section>
        <Actions>
          <Button small disabled>
            Previous
          </Button>
          <Button small onClick={() => setActiveStep(1)}>
            Next
          </Button>
        </Actions>
      </Stepper.Step>
      <Stepper.Step label="Class Booked">
        <Section>Class Booked content</Section>
        <Actions>
          <Button small onClick={() => setActiveStep(0)}>
            Previous
          </Button>
          <Button small onClick={() => setActiveStep(2)}>
            Next
          </Button>
        </Actions>
      </Stepper.Step>
      <Stepper.Step label="Check-in">
        <Section>Check-in content</Section>
        <Actions>
          <Button small onClick={() => setActiveStep(1)}>
            Previous
          </Button>
          <Button small disabled>
            Next
          </Button>
        </Actions>
      </Stepper.Step>
    </Stepper>
  );
});