chores: merge conflicts resolved

Author: hammad-khan-iomechs

components/aboutUs.js

@@ -2,6 +2,7 @@
 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);
@@ -17,10 +18,10 @@ const AboutUs = () => {
             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>`;
+              ).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>`;
             }
           }
         });
@@ -92,14 +93,36 @@ const AboutUs = () => {
               </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 🥂
+              {/* <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
                   </p>
-                  <div
-                    id="contributors"
-                    className="overflow-auto whitespace-nowrap w-auto flex flex-wrap justify-evenly gap-1 md:gap-8"></div>
+                  <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 href="/contributors">
+                    <p className="bg-rose-400 py-1 px-2 rounded-2xl text-white font-semibold cursor-pointer">
+                      Check your
+                    </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>

components/contributor.js

@@ -0,0 +1,68 @@
+/* eslint-disable @next/next/no-img-element */
+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,61 @@
+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 ">
+              {console.log("checking, ", contributors)}
+              {contributors.map((contributor, idx) => (
+                <Contributor key={idx} contributor={contributor} />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Contributors;

components/faqs.js

@@ -16,7 +16,7 @@ const FAQs = () => {
         },
         q3: {
           qus: "What all components are there in this website",
-          ans: 'There are a lot of components on this website, you can access them from <a href="/components" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
+          ans: 'There are lots of components such as Button, Form, Feature Card etc. which can save lot of time for a front end dev. you can access them from <a href="/components" target="_blank" rel="noreferrer" class="text-blue-700">Here</a>',
         },
         q4: {
           qus: "Can we play around with tailwindcss codes",

components/footer.js

@@ -20,7 +20,7 @@ const Footer = () => {
                 tailwind
               </span>
               <span className="text-white self-center text-xl md:text-2xl font-semibold whitespace-nowrap dark:text-blue-500 ml-2">
-                BOOTSRAP
+                BOOTSTRAP
               </span>
             </a>
           </div>

components/navbar.js

@@ -15,7 +15,7 @@ const Navbar = () => {
   };
   const displayMenu = () => {
     if (isMenuOpen) {
-      return "small-screen-header flex flex-col justify-center items-center ";
+      return "flex small-screen-header flex-col justify-center items-center gap-2 my-2";
     } else {
       return "hidden";
     }
@@ -32,23 +32,24 @@ const Navbar = () => {
           className=" cursor-pointer"
         />
         <div className="right_contents">
-          <div className="nav_links">
-            <Link href="/components">Components</Link>
-          </div>
-          <div className="nav_links">
-            <Link href="/documentation">Documentation</Link>
-          </div>
-          <div className="nav_links">
-            <Link href="/aboutUs">About Us</Link>
-          </div>
-          <div className="nav_links">
-            <Link href="/faqs">FAQs</Link>
-          </div>
+          <Link href="/components">
+            <div role="button" className="nav_links">Components</div>
+          </Link>
+          <Link href="/documentation">
+            <div role="button" className="nav_links">Documentation</div>
+          </Link>
+          <Link href="/aboutUs">
+            <div role="button" className="nav_links">About Us</div>
+          </Link>
+          <Link href="/faqs">
+            <div role="button" className="nav_links">FAQs</div>
+          </Link>
         </div>
         <div className="hamburger" onClick={showMenu}>
           <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/components/badges.js

@@ -16,7 +16,7 @@ const Badge = () => {
       <Navbar />
       <div className="codepen_page font-poppins">
         <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
-          How cool is to have coloured and meaningfull badges near your image/
+          How cool is to have coloured and meaningful badges near your image/
           cards/ testimonials. Sounds interesting, then why waiting to check
           inside 😎
         </p>

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>
+    </>
+  );
+}

styles/components/navbar_style.css

@@ -54,10 +54,10 @@ nav {
 @media (max-width: 899px) {
   .nav_links {
     padding: 12px;
-    margin-bottom: 24px;
+    /* margin-bottom: 24px; */
   }
   .nav_links:nth-child(1) {
-    margin-top: 5vh;
+    /* margin-top: 5vh; */
   }
   .nav_container {
     width: 96%;