about us contributors list added

Author: jsvigneshkanna

components/aboutUs.js

@@ -9,18 +9,24 @@ const AboutUs = () => {
   useEffect(() => {
     setTimeout(() => {
       setloading(false);
+      fetch(
+        "https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors",
+      )
+        .then((res) => res.json())
+        .then((res) => {
+          if (document.getElementById("contributors").innerHTML == "") {
+            for (var xx = 0; xx < res.length; xx++) {
+              document.getElementById(
+                "contributors",
+              ).innerHTML += ` <a href="${res[xx].url}" class=" overflow-hidden flex flex-col justify-evenly w-28 m-4"><img class="inline rounded-full"
+                                                              src="${res[xx].avatar_url}"
+                                                              alt=""/><span
+                                                              class="text-white"><div class="w-full text-center">${res[xx].login}</div></span></a>`;
+            }
+          }
+        });
     }, 600);
   }, []);
-  // fetch('https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors').then(res => res.json()).then(res => {
-  //       if (document.getElementById('contributors').innerHTML == "") {
-  //             for (var xx = 0; xx < res.length; xx++) {
-  //                   document.getElementById('contributors').innerHTML += ` <a href="${res[xx].url}" class=" overflow-hidden flex flex-col justify-evenly w-28 m-4"><img class="inline rounded-full"
-  //                                                             src="${res[xx].avatar_url}"
-  //                                                             alt=""/><span
-  //                                                             class="text-white"><div class="w-full text-center">${res[xx].login}</div></span></a>`
-  //             }
-  //       }
-  // })
 
   return (
     <div>
@@ -87,7 +93,7 @@ const AboutUs = () => {
               </div>
             </div>
             <div>
-              <div className="flex  flex-col justify-center items-center flex-wrap">
+              {/* <div className="flex  flex-col justify-center items-center flex-wrap">
                 <div className=" my-5 mx-3 p-6 flex flex-col justify-center items-center md:w-4/5 md:mx-0p-6 px-5 overflow-auto border-blue-700 border-2 rounded-lg bg-sky-300">
                   <p className=" text-xl font-bold underline underline-offset-4 text-blue-700 mb-4">
                     Check out our cool contributors
@@ -106,6 +112,18 @@ const AboutUs = () => {
                     </p>
                   </Link>
                 </div>
+              </div> */}
+              <div>
+                <div className="flex  flex-col justify-center items-center flex-wrap">
+                  <div className=" my-5 mx-3 p-6 flex flex-col justify-center items-center md:w-4/5 md:mx-0p-6 px-5 overflow-auto border-blue-700 border-2 rounded-lg">
+                    <p className=" mt-8 mb-8 text-xl text-white underline underline-offset-4">
+                      Our Contributers 🥂
+                    </p>
+                    <div
+                      id="contributors"
+                      className="overflow-auto whitespace-nowrap w-auto flex flex-wrap justify-evenly gap-1 md:gap-8"></div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>