stepper

gistfile1.txt

import { Box, Flex, Text } from "@chakra-ui/react";

type StepProps = {
  activeColor?: string;
  defaultColor?: string;
  title: string;
  isFirst?: boolean;
  index: number;
  isActive?: boolean;
  isLast?: boolean;
};

const Step = ({ title, index }: StepProps) => {
  return (
    <Box>
      <Text>{title}</Text>
    </Box>
  );
};

type StepperProps = {
  activeStep: number;
  steps: [{ title: string }];
  defaultColor?: string;
  activeColor?: string;
};

const Stepper = ({
  activeStep,
  steps,
  defaultColor = "",
  activeColor = "",
}: StepperProps) => {
  return (
    <Flex>
      {steps.map((step, index) => (
        <Step key={index} title={step.title} index={index} />
      ))}
    </Flex>
  );
};

export const ProgressBar = () => {
  return (
    <Box>
      <Stepper steps={[{ title: "Informações" }, { title: "Informações" }, { title: "Informações" }]} activeStep={1} />
    </Box>
  );
};