MobileStepper

import { MobileStepper } from "@fanvue/ui";
import type {
  MobileStepperPosition,
  MobileStepperProps,
  MobileStepperVariant,
} from "@fanvue/ui";

import * as React from "react";
import { Button, MobileStepper } from "@fanvue/ui";

function InteractiveDemo() {
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = 6;

  return (
    <MobileStepper
      steps={steps}
      activeStep={activeStep}
      variant="dots"
      backButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === 0}
          onClick={() => setActiveStep((prev) => prev - 1)}
        >
          Back
        </Button>
      }
      nextButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === steps - 1}
          onClick={() => setActiveStep((prev) => prev + 1)}
        >
          Next
        </Button>
      }
    />
  );
}

<InteractiveDemo />

import { Button, MobileStepper } from "@fanvue/ui";

<MobileStepper
  steps={6}
  activeStep={2}
  variant="text"
  formatText={(active, total) => `Step ${active} of ${total}`}
  backButton={<Button size="32" variant="tertiary">
    Back
  </Button>}
  nextButton={<Button size="32" variant="tertiary">
    Next
  </Button>}
/>

import { Button, MobileStepper } from "@fanvue/ui";

<MobileStepper
  steps={6}
  activeStep={2}
  variant="dots"
  backButton={<Button size="32" variant="tertiary">
    Back
  </Button>}
  nextButton={<Button size="32" variant="tertiary">
    Next
  </Button>}
/>

import * as React from "react";
import { Button, MobileStepper } from "@fanvue/ui";

function InteractiveProgressDemo() {
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = 6;

  return (
    <MobileStepper
      steps={steps}
      activeStep={activeStep}
      variant="progress"
      backButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === 0}
          onClick={() => setActiveStep((prev) => prev - 1)}
        >
          Back
        </Button>
      }
      nextButton={
        <Button
          size="32"
          variant="tertiary"
          disabled={activeStep === steps - 1}
          onClick={() => setActiveStep((prev) => prev + 1)}
        >
          Next
        </Button>
      }
    />
  );
}

<InteractiveProgressDemo />

import { Button, MobileStepper } from "@fanvue/ui";

<MobileStepper
  steps={6}
  activeStep={2}
  variant="progress"
  backButton={<Button size="32" variant="tertiary">
    Back
  </Button>}
  nextButton={<Button size="32" variant="tertiary">
    Next
  </Button>}
/>