Merge pull request #245 from AnnieDebbie/D.A-Contributors

Create contributors page

components/aboutUs.js

@@ -2,30 +2,25 @@
 import {useState, useEffect} from "react";
 import {BallTriangle} from "react-loader-spinner";
 import {SiBuymeacoffee} from "react-icons/si";
+import Link from "next/link";
 
 const AboutUs = () => {
   const [loading, setloading] = useState(true);
   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="https://github.com/${res[xx].login}" target="_blank" rel="noreferrer" 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 mt-4">${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>
@@ -93,13 +88,18 @@ const AboutUs = () => {
             </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 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">
+                  <Link href="/contributors" className="cursor-pointer">
+                    <p className=" text-xl font-bold underline underline-offset-4 text-blue-700 mb-4">
+                      Check out our cool contributors
+                    </p>
+                    <hr className="bg-white" />
+                    <p className="w-full text-center text-blue-900 font-semibold flex flex-col md:flex-row justify-center items-center">
+                      We currently have around 50+ open source contributors who have contributed in codebase through different ways from 
+                      correcting the UI components to adding this whole new link ❤️‍🔥. Check our contributors in next page, and you too can
+                      become a part of our cool 🥸 community. 
+                    </p>
+                  </Link>
                 </div>
               </div>
             </div>

components/contributor.js

@@ -0,0 +1,67 @@
+import {useEffect, useState} from "react";
+
+function Contributor(props) {
+  const [socials, setSocials] = useState({});
+
+  useEffect(() => {
+    fetch(`https://api.github.com/users/${props.contributor.login}`)
+      .then((res) => res.json())
+      .then((contributor) => setSocials(contributor));
+  }, []);
+
+  return (
+    <div className="flex items-center gap-4 p-4 border border-x-0 border-t-0 mb-4 border-orange-200 md:w-56 md:border md:rounded-2xl md:p-3 md:m-4 md:flex-col">
+      <img
+        className=" w-12 h-12 rounded-full md:w-28 md:h-28"
+        src={socials.avatar_url}
+        alt="contributor-logo"
+      />
+      <span className="md:flex text-xl font-bold text-white md:flex-col md:items-center">
+        <div className="">{socials.login}</div>
+
+        <div className="md:flex flex flex-row">
+          <a href={socials.url}>
+            <svg
+              fill="#FFFFFF"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 30 30"
+              width="30px"
+              height="30px">
+              {" "}
+              <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z" />
+            </svg>
+          </a>
+          {socials["twitter-username"] && (
+            <a href={`https://twitter.com/${socials["twitter-username"]}`}>
+              <svg
+                fill="#FFFFFF"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 30 30"
+                width="30px"
+                height="30px">
+                {" "}
+                <path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z" />
+              </svg>
+            </a>
+          )}
+
+          {socials["blog"] && (
+            <a href={`${socials["blog"]}`}>
+              <svg
+                fill="#FFFFFF"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 30 30"
+                width="30px"
+                height="30px">
+                {" "}
+                <path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 24 C 4 25.105 4.895 26 6 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 6 C 26 4.895 25.105 4 24 4 L 6 4 z M 12.308594 8 L 15 8 C 17.38 8 19.325594 9.9567969 19.308594 12.341797 C 19.303594 12.923797 19.802766 13.384766 20.384766 13.384766 L 20.923828 13.384766 C 21.518828 13.384766 22 13.867891 22 14.462891 L 22 17.691406 C 22 20.061406 20.061406 22 17.691406 22 L 12.306641 22 C 9.9376406 22 8 20.061406 8 17.691406 L 8 15 L 8 12.308594 C 8 9.9385938 9.9385938 8 12.308594 8 z M 12.308594 11.230469 C 11.716594 11.230469 11.230469 11.716594 11.230469 12.308594 C 11.230469 12.900594 11.716594 13.384766 12.308594 13.384766 L 15 13.384766 C 15.592 13.384766 16.076172 12.900594 16.076172 12.308594 C 16.076172 11.716594 15.592 11.230469 15 11.230469 L 12.308594 11.230469 z M 12.306641 16.615234 C 11.714641 16.615234 11.230469 17.099406 11.230469 17.691406 C 11.230469 18.283406 11.714641 18.769531 12.306641 18.769531 L 17.691406 18.769531 C 18.283406 18.769531 18.769531 18.283406 18.769531 17.691406 C 18.769531 17.099406 18.284406 16.615234 17.691406 16.615234 L 12.306641 16.615234 z" />
+              </svg>
+            </a>
+          )}
+        </div>
+      </span>
+    </div>
+  );
+}
+
+export default Contributor;

components/contributors.js

@@ -0,0 +1,58 @@
+import {useState, useEffect} from "react";
+import Contributor from "./contributor";
+import {BallTriangle} from "react-loader-spinner";
+
+const Contributors = () => {
+  const [loading, setloading] = useState(true);
+  const [contributors, setContributors] = useState([]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setloading(false);
+    }, 600);
+
+    fetch(
+      "https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors",
+    )
+      .then((res) => res.json())
+      .then((contributors) => setContributors(contributors));
+  }, []);
+
+  return (
+    <div>
+      {loading ? (
+        <div
+          style={{
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.99)",
+            display: "flex",
+            justifyContent: "center",
+          }}
+          className="banner">
+          <BallTriangle
+            height="100"
+            width="100"
+            color="#e39a09"
+            ariaLabel="loading"
+          />
+        </div>
+      ) : (
+        <div className="banner">
+            <div className="mx-4 md:mx-40">
+              <p className="text-3xl text-white font-bold text-center ">Our contributors:</p>
+              <div className="p-6 px-5"></div>
+              <div
+                id="contributors"
+                className="max-w-sm relative mx-auto dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col   md:max-w-5xl md:overflow-auto md:w-auto md:flex md:flex-row md:flex-wrap md:justify-evenly ">
+                {contributors.map((contributor, idx) => (
+                  <Contributor key={idx} contributor={contributor} />
+                ))}
+              </div>
+            </div>
+          </div>
+      )}
+    </div>
+  );
+};
+
+export default Contributors;

components/navbar.js

@@ -49,6 +49,7 @@ const Navbar = () => {
           <p>{isMenuOpen ? <AiOutlineClose /> : <MdMenu />}</p>
         </div>
       </nav>
+
       <div className={displayMenu()}>
         <div className="nav_links">
           <Link href="/components">Components</Link>

pages/aboutUs.js

@@ -4,6 +4,7 @@ import Navbar from "../components/navbar";
 import AboutUs from "../components/aboutUs";
 import Footer from "../components/footer";
 import SocialButtons from "../components/socialbuttons";
+import Contributors from "../components/contributors";
 
 export default function Home() {
   return (

pages/contributors.js

@@ -0,0 +1,53 @@
+import Head from "next/head";
+
+import Navbar from "../components/navbar";
+import Footer from "../components/footer";
+import SocialButtons from "../components/socialbuttons";
+import Contributors from "../components/contributors";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Tailwind Bootstrap | Contributors</title>
+        <link rel="icon" href="/favi-tailwind.png" type="image/png" />
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+        />
+        <meta name="title" content="Tailwind Bootstrap" />
+        <meta name="description" content="TailwindCSS ui component bootstrap" />
+
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:url"
+          content="https://tailwindcsscomponents.vercel.app/"
+        />
+        <meta property="og:title" content="Tailwind Bootstrap" />
+        <meta
+          property="og:description"
+          content="TailwindCSS ui component bootstrap"
+        />
+
+        <meta
+          property="twitter:url"
+          content="https://tailwindcsscomponents.vercel.app/"
+        />
+        <meta property="twitter:title" content="Tailwind Bootstrap" />
+        <meta
+          property="twitter:description"
+          content="TailwindCSS ui component bootstrap"
+        />
+      </Head>
+
+      <div className=" bg-slate-100 w-full min-h-screen font-poppins">
+        <Navbar />
+        <Contributors />
+        <div className="social_buttons">
+          <SocialButtons />
+        </div>
+        <Footer />
+      </div>
+    </>
+  );
+}