TokenFActoryVestingTabs.jsx

const pills = [
    { id: "tokenfactory", title: "Token Factory" },
    { id: "mytokenlist", title: "All Tokens" },
    { id: "vesting", title: "Token Vesting" },
];

return (
    <>
        <div style={{ display: "flex", "justify-content": "center" }}>
            <label style={{ "font-weight": "900", "font-size": "35px" }}>
                Token Factory + Vesting
            </label>
        </div>
        <br />
        <ul className="nav nav-pills nav-fill mb-4" id="pills-tab" role="tablist">
            {pills.map(({ id, title }, i) => (
                <li className="nav-item" role="presentation" key={i}>
                    <button
                        className={`nav-link ${i === 0 ? "active" : ""}`}
                        id={`pills-${id}-tab`}
                        data-bs-toggle="pill"
                        data-bs-target={`#pills-${id}`}
                        type="button"
                        role="tab"
                        aria-controls={`pills-${id}`}
                        aria-selected={i === 0}
                        onClick={() => {
                            const key = `load${id}`;
                            !state[key] && State.update({ [key]: true });
                        }}
                    >
                        {title}
                    </button>
                </li>
            ))}
        </ul>
        <div className="tab-content" id="pills-tabContent">
            <div
                className="tab-pane fade show active"
                id="pills-tokenfactory"
                role="tabpanel"
                aria-labelledby="pills-tokenfactory-tab"
            >
                <Widget src="yairnava.near/widget/Token-Factory" />
            </div>
            <div
                className="tab-pane fade vesmytokenlistting"
                id="pills-mytokenlist"
                role="tabpanel"
                aria-labelledby="pills-mytokenlist-tab"
            >
                <Widget src="yairnava.near/widget/TokenFactoryList" />
            </div>
            <div
                className="tab-pane fade vesting"
                id="pills-vesting"
                role="tabpanel"
                aria-labelledby="pills-vesting-tab"
            >
                <Widget src="yairnava.near/widget/TokenVesting" />
            </div>
        </div>
    </>
);