Help

type ComponentVariants = "input" | "select" | "checkbox";

type ComponentInput = {
  typeElement: "input";
  elementsProps: {
    cat: string;
  };
};

type ComponentSelect = {
  typeElement: "select";
  elementsProps: {
    dog: string;
  };
};

type ComponentCheckbox = {
  typeElement: "checkbox";
  elementsProps: {
    fish: string;
  };
};

type OnlyElementsProps = (
  | ComponentInput
  | ComponentSelect
  | ComponentCheckbox
)["elementsProps"];

const GetComponent = ({
  variant,
  componentsProps,
}: {
  variant: ComponentVariants;
  componentsProps: OnlyElementsProps;
}) => {
  switch (variant) {
    case "input":
      return <Input {...componentsProps} />;
    case "checkbox":
      return <Checkbox {...componentsProps} />;
    case "select":
      return <Select {...componentsProps} />;
    default:
      return <div> null </div>;
  }
};

const Input = ({ cat }: { cat: string }) => <div>Input - {cat} </div>;
const Checkbox = ({ fish }: { fish: string }) => <div>Checkbox - {fish} </div>;
const Select = ({ dog }: { dog: string }) => <div>Select - {dog} </div>;