ProgressSteps

import * as React from "react";
import {
  ProgressSteps,
  Step
} from "spaceweb/progressSteps";

export default () => {
  const [current, setCurrent] = React.useState(0);
  return (
    <ProgressSteps
      current={current}
      orientation="horizontal"
    >
      <Step title="Verify Name">
        <p>Name: Jon Doe</p>
        <Button size="sm" onClick={() => setCurrent(1)}>
          Next
        </Button>
      </Step>
      <Step title="Verify Address">
        <p>Address on file: 1455 Market Street</p>
        <Button size="sm" onClick={() => setCurrent(2)}>
          Next
        </Button>
      </Step>
      <Step title="Verify Payment">Payment verified</Step>
    </ProgressSteps>
  );
}

import * as React from "react";
import { Step } from "spaceweb/progressSteps";

export default () => {
  return (
    <Step
      title="Verification step"
      isCompleted
      intent="default"
      isActive
    >
      <Box className="mb-1">
        <Typography>Proceed to payment portal</Typography>
      </Box>
      <Button size="xxs">Proceed</Button>
    </Step>
  );
}