function Users()

in src/pages/users.tsx [33:133]

• 101 lines of code
• 1 McCabe index (conditional complexity)

function Users() {
  const {
    siteConfig: {
      customFields: { description },
      tagline,
    },
  } = useDocusaurusContext();
  const userGroups = group(users, (users.length) / 3);
  return (
    <Layout title={tagline} description={description as string}>
      <main>
        <div className={clsx(styles.section, styles.userSwiperContainer)}>
          <div className="container">
            <h1 className={styles.blockTitle}><Translate>Our Users</Translate></h1>
            <p className={styles.blockDescription}>
              <Translate>Here is a list of companies or organizations that we know have used all or some of Apache ShenYu’s components in production.This list is in no particular order.</Translate>
            </p >
            <div className={styles.userPart}>
              <div className={styles.scrollView}>
                <div className={styles.scrollLine1}>
                  {
                    userGroups[0].map((user, i) => {
                      return (
                        <div className={styles.scrollItem} key={i}>
                          <a href="noopener noreferrer" target="_blank">
                            <img className={styles.scrollImage} src={user.src && (user.src.startsWith("http") ? user.src : useBaseUrl(user.src))} alt={user.name} />
                          </a>
                        </div>
                      )
                    })
                  }
                </div>
                <div className={styles.scrollLine2}>
                  {
                    userGroups[1].map((user, i) => {
                      return (
                        <div className={styles.scrollItem} key={i}>
                          <a href={user.link} rel="noopener noreferrer" target="_blank">
                            <img className={styles.scrollImage} src={user.src && (user.src.startsWith("http") ? user.src : useBaseUrl(user.src))} alt={user.name} />
                          </a>
                        </div>
                      )
                    })
                  }
                </div>
                <div className={styles.scrollLine3}>
                  {
                    userGroups[2].map((user, i) => {
                      return (
                        <div className={styles.scrollItem} key={i}>
                          <a href={user.link} rel="noopener noreferrer" target="_blank">
                            <img className={styles.scrollImage} src={user.src && (user.src.startsWith("http") ? user.src : useBaseUrl(user.src))} alt={user.name} />
                          </a>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
              <div className={styles.scrollItemLeft}>
                <div className={styles.scrollItemLeftInner}></div>
              </div>
              <div className={styles.scrollItemRight}>
                <div className={styles.scrollItemRightInner}></div>
              </div>
            </div>
            {/* <Swiper navigation={{
              nextEl: '.user-swiper-button-next',
              prevEl: '.user-swiper-button-prev',
            }}
              modules={[Navigation, Pagination]}
              slidesPerView={7}
              spaceBetween={20} pagination={{
                "clickable": true
              }}
              className={styles.userSwiperContent}>
              {
                userGroups.map((userList, i) => {
                  return <SwiperSlide key={i} >
                    {
                      userList.map((user, j) => {
                        return <div key={j} className={styles["swiper-slide"]}>
                          < a href={user.link} rel="noopener noreferrer" target="_blank">
                            < img src={user.src&&(user.src.startsWith("http")?user.src:useBaseUrl(user.src))} alt={user.name} />
                          </ a>
                        </div>
                      })
                    }
                  </SwiperSlide>
                })
              }
            </Swiper> */}
            <p><Translate>To better serve you, please register</Translate><a target="_blank" href="https://github.com/apache/shenyu/issues/68"><Translate>[Here].</Translate></ a></p >
          </div>
          {/* <div className="swiper-button-prev user-swiper-button-prev" style={{ left: "50px" }}></div>
          <div className="swiper-button-next user-swiper-button-next" style={{ right: "50px" }}></div> */}
        </div>
      </main>
    </Layout>
  );
}