2nd iteration code for public repos and templates

const AddingRepo = () => {
  return (
    <Grid
      container
      padding={"28px 30px 30px"}
      borderRadius="5px"
      marginTop="50px"
      sx={{
        backgroundColor: "#5305A1",
      }}
      gap="30px"
      flexDirection="row"
    >
      <Grid container flexDirection="column" width="auto" gap="21px" flex="0.5">
        <OnboardingHeading smallest>Connect private repos:</OnboardingHeading>
        <Grid container className="buttons" gap="5px">
          <OnboardingButton small EndIcon={iconGitlab}>
            Gitlab
          </OnboardingButton>
          <OnboardingButton small EndIcon={iconGitHub}>
            Github
          </OnboardingButton>
        </Grid>
      </Grid>

      {/* Remove on 1st iteration */}
      {/* <Grid container gap="21px" flexDirection="column" flex="1">
        <label htmlFor="repo-input">
          <OnboardingHeading smallest>
            Or enter public GitHub repo URL
          </OnboardingHeading>
        </label>
        <Grid container display="flex">
          <Input id="repo-input" error={false} flex="1"></Input>
        </Grid>
      </Grid> */}
    </Grid>
  );
};

export function RepoConnection() {
  return (
    <OnboardingInnerBox gap="50px">
      <Grid container flex={1} display={"flex"} direction={"column"}>
        <RepoConnectionHeader />
        <AddingRepo />
      </Grid>
      {/* Remove on 1st iteration */}
      {/* <Grid container gap="21px" flexDirection="column" flexWrap="nowrap">
        <OnboardingHeading small secondary>
          Or deploy a sample app:
        </OnboardingHeading>
        <Templates />
      </Grid> */}
    </OnboardingInnerBox>
  );
}