|
| 1 | +import Head from 'next/head'; |
| 2 | + |
| 3 | +export const getStaticProps = async () => { |
| 4 | + const res = await fetch('https://api.github.com/repos/WebXDAO/webXDAO.github.io/contributors'); |
| 5 | + const data = await res.json(); |
| 6 | + |
| 7 | + return { |
| 8 | + props: { |
| 9 | + data, |
| 10 | + }, |
| 11 | + }; |
| 12 | +}; |
| 13 | + |
| 14 | +const contributors = ({ data }) => { |
| 15 | + return ( |
| 16 | + <> |
| 17 | + <Head> |
| 18 | + <title>Contributors | WebXDAO</title> |
| 19 | + </Head> |
| 20 | + <section> |
| 21 | + <div className='absolute top-40 -left-16 w-96 h-96 bg-gradient-to-t from-[#1BFFFF] to-[#2E3192] rounded-full'></div> |
| 22 | + <div className='absolute top-96 -right-80 w-[50rem] h-[50rem] bg-gradient-to-t from-[#FBB03B] to-[#D4145A] rounded-full'></div> |
| 23 | + <div className='absolute top-[70rem] -left-72 w-[40rem] h-[40rem] bg-gradient-to-t from-[#ED1E79] to-[#662D8C] rounded-full'></div> |
| 24 | + <div className='absolute top-[100rem] -right-16 w-96 h-96 bg-gradient-to-t from-[#FCEE21] to-[#009245] rounded-full'></div> |
| 25 | + <div className='relative z-1 my-[40px] mx-0 flex justify-center items-center flex-wrap'> |
| 26 | + |
| 27 | + {data.map((curElem) => { |
| 28 | + return ( |
| 29 | + <div className='group relative w-48 h-64 m-5 flex justify-center items-center bg-white bg-opacity-5 m-10 shadow-2xl rounded-2xl backdrop-filter backdrop-blur-md' key={curElem.login}> |
| 30 | + <div className='relative flex justify-center items-center flex-col opacity-70 hover:opacity-100'> |
| 31 | + <div className='relative w-40 h-40 overflow-hidden rounded-full truncate border-8 border-solid border-black/25 group-hover:-translate-y-6 duration-500'> |
| 32 | + <a href={curElem.html_url} target="_blank" rel="noopener noreferrer"> |
| 33 | + <img src={curElem.avatar_url} alt="Avatar" className='relative top-0 left-0 w-full h-full object-cover' /> |
| 34 | + </a> |
| 35 | + </div> |
| 36 | + <div className='relative justify-center items-center relative justify-center items-center flex-wrap text-center mx-0 my-0'> |
| 37 | + <a href={curElem.html_url} target="_blank" rel="noopener noreferrer"> |
| 38 | + <h3 className='group-hover:-translate-y-6 duration-500 text-white uppercase font-medium text-sm text-center tracking-wider mt-5 mr-2.5 ml-2.5 mb-2.5 leading-4'> |
| 39 | + {curElem.login} |
| 40 | + </h3> |
| 41 | + </a> |
| 42 | + <h5 className='group-hover:-translate-y-6 duration-500 rounded-md bg-green-500 pl-4 pr-4 text-base font-normal mb-0 mt-0 m-auto w-fit h-fit'> |
| 43 | + {curElem.contributions} |
| 44 | + <svg className='overflow-visible inline-block w-[1.25em] lowercase h-[1em] align-[-0.125em]' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hands-helping" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"> |
| 45 | + <path fill="currentColor" d="M488 192H336v56c0 39.7-32.3 72-72 72s-72-32.3-72-72V126.4l-64.9 39C107.8 176.9 96 197.8 96 220.2v47.3l-80 46.2C.7 322.5-4.6 342.1 4.3 357.4l80 138.6c8.8 15.3 28.4 20.5 43.7 11.7L231.4 448H368c35.3 0 64-28.7 64-64h16c17.7 0 32-14.3 32-32v-64h8c13.3 0 24-10.7 24-24v-48c0-13.3-10.7-24-24-24zm147.7-37.4L555.7 16C546.9.7 527.3-4.5 512 4.3L408.6 64H306.4c-12 0-23.7 3.4-33.9 9.7L239 94.6c-9.4 5.8-15 16.1-15 27.1V248c0 22.1 17.9 40 40 40s40-17.9 40-40v-88h184c30.9 0 56 25.1 56 56v28.5l80-46.2c15.3-8.9 20.5-28.4 11.7-43.7z"> |
| 46 | + </path> |
| 47 | + </svg> |
| 48 | + </h5> |
| 49 | + </div> |
| 50 | + </div> |
| 51 | + </div> |
| 52 | + ); |
| 53 | + })} |
| 54 | + </div> |
| 55 | + </section> |
| 56 | + </> |
| 57 | + ); |
| 58 | +}; |
| 59 | + |
| 60 | +export default contributors; |
0 commit comments