⇒ Icon Gradient

⇒ Tab Component

import { Children, useState } from "react";

import {
  FormContainer,
  FormContentContainer,
  FormHeader,
  FormHeaderItem,
  FormHeaderItemContainer,
} from "./styles";
import { Tab, TabChildren } from "./Tabs";

type FormTabProps = {
  children?: TabChildren;
  startStep?: number;
};

export function FormTabs({ children, startStep }: FormTabProps) {
  const [activeTab, setActiveTab] = useState(startStep || 0);

  return (
    <FormContentContainer>
      <FormHeader>
        <FormHeaderItemContainer>
          {Children.map(children, (child, index) => {
            if (child?.type === Tab) {
              return (
                <FormHeaderItem
                  className={index === activeTab ? "active" : ""}
                  onClick={() => setActiveTab(index)}
                >
                  {child}
                </FormHeaderItem>
              );
            }

            return null;
          })}
        </FormHeaderItemContainer>
      </FormHeader>
      <FormContainer>
        {Children.map(children, (child, index) => {
          if (index === activeTab) {
            return child.props.children;
          }

          return null;
        })}
      </FormContainer>
    </FormContentContainer>
  );
}

FormTabs.Tab = Tab;

import { ReactElement, ReactNode } from "react";

import { FormHeaderText } from "../styles";

type TabProps = {
  name: string;
  // eslint-disable-next-line react/no-unused-prop-types
  children: ReactNode;
};

export const Tab = ({ name }: TabProps) => {
  return <FormHeaderText>{name}</FormHeaderText>;
};

export type TabChildren = ReactElement<TabProps> | ReactElement<TabProps>[];