Login.js

import React from "react";
import styles from "./Login.module.css";
import data from "../../meta/metaData.json";

export default function Login(props) {
  const homePageContent = data.login.subContent;
  const loginButtons = data.login.buttons;

  console.log('isLogged', props.cb)
  // onClick={fakeAsyncLogin}
  //       const result = await fakeAsyncLogin();


  return (
    <div className={styles.mainPage}>
      <div className={styles.contentWrapper}>
        <div className={styles.logo}>
          <a href="/">
            <h1 className={styles.access}>
              {data.Onboarding.logo}
              <span className={styles.logoDash}>{data.Onboarding.cursor}</span>
            </h1>
          </a>
        </div>

        <div className={styles.signUpPage}>
          <div className={styles.card}>
            <div className={styles.learnContainer}>
              <h1 className={styles.learnHeading}>
                {data.login.heading1}{" "}
                <span className={styles.logoDash}>{data.Onboarding.logo}</span>
              </h1>
            </div>
            <div className="buttons">
              {loginButtons?.map((item) => (
                <button onClick={props.cb} className={styles[item.buttonStyle]}>
                  <img src={item.buttonIcon} alt="" />
                  <span className={styles[item.buttonTextStyle]}>
                    {item.buttonText}
                  </span>
                </button>
              ))}
            </div>
          </div>

          <div className={styles.techEducation}>
            <h1 className={styles.mteaHeading}>{data.login.heading2}</h1>

            {homePageContent?.map((item) => (
              <div key={item.id}>
                <div className={styles.imgTick}>
                  {" "}
                  <img src={item.tickIcon} alt="" />{" "}
                  <h3 className={styles.subHeading}>{item.subTitle}</h3>
                </div>
                <p className={styles.subContent}>{item.paragraph}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}