GithubRender.js

import Link from 'next/link'
import styles from './GithubRender.module.css'
import Fork from '../../images/fork.svg'
import Star from '../../images/star.svg'
import Image from 'next/image'
import { getInfoFromGit } from '../../api'
import { useEffect, useState } from 'react'

export const GithubRender = () => {
  const [repos, setRepos] = useState([])

  useEffect(() => {
    const urls = [
      { user: 'fakng-agrgtr', repository: 'fakng-ui' },
      { user: 'TangoPJ', repository: 'railbatyrshin-web-app' },
      { user: 'maddevsio', repository: 'maddevs' },
      { user: 'maddevsio', repository: 'mad-radiator' }
    ]
    const fetchData = async (urls) => {
      const repositories = await getInfoFromGit(urls)
      setRepos(repositories)
    }
    fetchData(urls)
  }, [])

  return (
    <section className={styles.wrapper}>
      <h1 className={styles.title}>
        GitHub repositories
      </h1>
      <div className='container'>
        <div className={styles.cards}>
          {repos.map(repo => {
            return (
              <div className={styles['card-wrapper']} key={repo.name}>
                <div className={styles.card}>
                  <p className={styles['card-title']}>
                    { repo.name }
                  </p>
                  <div className={styles['card-subtitle']}>
                    <span className={styles['card-icon']}>
                      <Image src={Star} alt="Github" width={25} height={25} />
                    </span>
                    <span className={styles['card-text']}>{ repo.stars }</span>
                    <span className={styles['card-icon']}>
                      <Image src={Fork} alt="Github" width={20} height={20} />
                    </span>
                    <span className={styles['card-text']}>{ repo.forks }</span>
                  </div>
                  <p className={styles['card-description']}>
                    { repo.description }
                  </p>
                  <div className={styles['card-footer']}>
                    <hr className={styles['card-line']} />
                    <Link href={ repo.url }>
                      <a target="_blank" rel="noopener noreferrer">
                        VIEW REPO
                      </a>
                    </Link>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
};