Merge pull request #520 from Anmol-Baranwal/hack_link_component

feat: use Link component rather than anchor tag

Author: vinzvinci

backup src/components/Global/Blogs.jsx

@@ -55,11 +55,11 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
       </div>
       {!contentOnly && (
         <div className="flex justify-center">
-          <a href="https://dev.to/WebXDAO" target="_blank" rel="noreferrer">
+          <Link href="https://dev.to/WebXDAO" target="_blank" rel="noreferrer">
             <button className="bg-gray-700 text-white mx-auto lg:mx-0 rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out">
               See All
             </button>
-          </a>
+          </Link>
         </div>
       )}
     </section>

backup src/components/Global/Footer.js

@@ -1,5 +1,5 @@
-import { SiGithubsponsors } from "react-icons/si";
 import Link from "next/link";
+import { SiGithubsponsors } from "react-icons/si";
 
 const navigation = [
   {
@@ -39,33 +39,33 @@ const navigation = [
 const Footer = () => {
   return (
     <footer className="bg-transparent">
-      <div className="max-w-screen-xl px-4 pt-16 pb-6 mx-auto sm:px-6 lg:px-8 lg:pt-24">
+      <div className="mx-auto max-w-screen-xl px-4 pb-6 pt-16 sm:px-6 lg:px-8 lg:pt-24">
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div>
             <div className="flex justify-center text-teal-600 sm:justify-start">
-              <a href="https://webxdao.xyz">
+              <Link href="https://webxdao.xyz">
                 <span className="sr-only">WebX DAO</span>
-                <img className="w-auto sm:h-14 md:h-16 h-12" src="/images/logo/logo.png" alt="" />
-              </a>
+                <img className="h-12 w-auto sm:h-14 md:h-16" src="/images/logo/logo.png" alt="" />
+              </Link>
             </div>
             {/* 
             <p className="max-w-md mx-auto mt-6 leading-relaxed text-center text-white/80 sm:max-w-xs sm:mx-0 sm:text-left">
               Add organization description here!
             </p> */}
           </div>
 
-          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:col-span-2 md:grid-cols-4">
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4 lg:col-span-2">
             {navigation.map((item) => (
               <>
                 <div key={item.name + "_footer"} className="sm:text-left">
-                  <p className="text-lg sm:text-sm font-medium text-white/90">{item.name}</p>
+                  <p className="text-lg font-medium text-white/90 sm:text-sm">{item.name}</p>
 
                   <nav className="mt-4 sm:mt-3" aria-label={item.name}>
                     <ul className="space-y-4 text-sm">
                       {item.children.map((child) => (
                         <li key={child.name}>
                           <Link href="/">
-                            <span className="text-white/60 hover:text-white/95 transition cursor-pointer">
+                            <span className="cursor-pointer text-white/60 transition hover:text-white/95">
                               {child.name}
                             </span>
                           </Link>
@@ -79,7 +79,7 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="pt-6 mt-5 sm:mt-12">
+        <div className="mt-5 pt-6 sm:mt-12">
           <div className="text-center sm:flex sm:justify-between sm:text-left">
             <p className="text-sm text-gray-500">
               <span className="block sm:inline">All rights reserved.</span>
@@ -88,7 +88,7 @@ const Footer = () => {
             <p className="mt-1 text-sm text-gray-500 sm:order-first sm:mt-0">
               <span className="flex items-center justify-center">
                 &copy; {new Date().getFullYear()} Made with
-                <SiGithubsponsors className="w-3 h-3 m-2 text-pink-600" aria-hidden="true" />
+                <SiGithubsponsors className="m-2 h-3 w-3 text-pink-600" aria-hidden="true" />
                 by WebX DAO
               </span>
             </p>

backup src/components/Global/Navbar.js

@@ -1,7 +1,7 @@
-import Link from "next/link";
-import { Fragment } from "react";
 import { Popover, Transition } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { Fragment } from "react";
 import { SiGithubsponsors } from "react-icons/si";
 
 const navigation = [
@@ -21,47 +21,45 @@ const Navbar = () => {
           className="relative mx-auto mb-4 flex max-w-7xl items-center justify-between px-4 sm:px-6"
           aria-label="Global"
         >
-          <div className="flex items-center flex-1">
-            <div className="flex items-center justify-between w-full lg:w-auto">
+          <div className="flex flex-1 items-center">
+            <div className="flex w-full items-center justify-between lg:w-auto">
               <Link href="/">
-                  <a>
-                <>
-                    <span className="sr-only ">WebX DAO</span>
-                    <img
-                      className="h-12 w-auto sm:h-12 md:h-[4.2rem] cursor-pointer"
-                      src="/images/logo/logo.png"
-                      alt="WebX DAO White Logo"
-                    />
-                        </>
-                  </a>
+                <span className="sr-only ">WebX DAO</span>
+                <img
+                  className="h-12 w-auto cursor-pointer sm:h-12 md:h-[4.2rem]"
+                  src="/images/logo/logo.png"
+                  alt="WebX DAO White Logo"
+                />
               </Link>
-              <div className="flex items-center justify-between -mr-2 lg:hidden ">
-                <Popover.Button className="inline-flex items-center justify-center p-2 text-gray-400 bg-transparent rounded-md focus-ring-inset hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
+              <div className="-mr-2 flex items-center justify-between lg:hidden ">
+                <Popover.Button className="focus-ring-inset inline-flex items-center justify-center rounded-md bg-transparent p-2 text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                   <span className="sr-only">Open main menu</span>
-                  <Bars3Icon className="w-6 h-6" aria-hidden="true" />
+                  <Bars3Icon className="h-6 w-6" aria-hidden="true" />
                 </Popover.Button>
               </div>
             </div>
             {/* Add content here to get menu next to icon */}
           </div>
-          <div className="hidden lg:flex lg:items-center md:space-x-6">
+          <div className="hidden md:space-x-6 lg:flex lg:items-center">
             <div className="hidden space-x-8 lg:ml-10 lg:flex">
               {navigation.map((item) => (
-                <Link href={item.href} key={item.name}>
-                  <a className="text-base font-medium text-white hover:text-gray-300">
-                    {item.name}
-                  </a>
+                <Link
+                  href={item.href}
+                  key={item.name}
+                  className="text-base font-medium text-white hover:text-gray-300"
+                >
+                  {item.name}
                 </Link>
               ))}
             </div>
 
-            <a
+            <Link
               href="https://github.com/sponsors/WebXDAO"
-              className="inline-flex items-center px-4 py-2 text-base font-medium text-gray-600 bg-gray-100 border border-transparent rounded-md hover:text-white/80 hover:bg-gray-700"
+              className="inline-flex items-center rounded-md border border-transparent bg-gray-100 px-4 py-2 text-base font-medium text-gray-600 hover:bg-gray-700 hover:text-white/80"
             >
               GitHub
-              <SiGithubsponsors className="w-5 h-5 ml-3 text-pink-600" aria-hidden="true" />
-            </a>
+              <SiGithubsponsors className="ml-3 h-5 w-5 text-pink-600" aria-hidden="true" />
+            </Link>
           </div>
         </nav>
       </div>
@@ -77,34 +75,34 @@ const Navbar = () => {
       >
         <Popover.Panel
           focus
-          className="absolute inset-x-0 top-0 z-10 p-2 transition origin-top transform lg:hidden"
+          className="absolute inset-x-0 top-0 z-10 origin-top transform p-2 transition lg:hidden"
         >
-          <div className="overflow-hidden rounded-lg shadow-xl backdrop-blur-sm bg-gradient1/50 ring-1 ring-white ring-opacity-5">
+          <div className="bg-gradient1/50 overflow-hidden rounded-lg shadow-xl ring-1 ring-white ring-opacity-5 backdrop-blur-sm">
             <div className="flex items-center justify-between px-5 pt-4">
               <div>
                 <img
-                  className="w-auto h-10 sm:h-12 md:h-14 lg:h-16"
+                  className="h-10 w-auto sm:h-12 md:h-14 lg:h-16"
                   src="/images/logo/logo.png"
                   alt="WebX DAO"
                 />
               </div>
               <div className="-mr-2">
-                <Popover.Button className="inline-flex items-center justify-center p-2 text-gray-400 rounded-md bg-white/20 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyber-webx">
+                <Popover.Button className="focus:ring-cyber-webx inline-flex items-center justify-center rounded-md bg-white/20 p-2 text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset">
                   <span className="sr-only">Close menu</span>
-                  <XMarkIcon className="w-6 h-6" aria-hidden="true" />
+                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                 </Popover.Button>
               </div>
             </div>
-            <div className="pt-5 pb-6">
-              <div className="px-2 space-y-1">
+            <div className="pb-6 pt-5">
+              <div className="space-y-1 px-2">
                 {navigation.map((item) => (
-                  <a
+                  <Link
                     key={item.name}
                     href={item.href}
-                    className="block px-3 py-2 text-base font-medium text-gray-100 rounded-md hover:bg-gray-600"
+                    className="block rounded-md px-3 py-2 text-base font-medium text-gray-100 hover:bg-gray-600"
                   >
                     {item.name}
-                  </a>
+                  </Link>
                 ))}
               </div>
               {/* Add button here */}

backup src/components/Home/DeveloperPath.jsx

@@ -1,4 +1,5 @@
 import { prefix } from "../../constants";
+import Link from "next/link";
 
 const DeveloperPath = () => {
   const devPaths = [
@@ -64,11 +65,11 @@ const DeveloperPath = () => {
                     {text}
                   </p>
                   <div id="label" className="flex text-sm gap-x-3">
-                    <a href={url}>
+                    <Link href={url}>
                       <button className="cursor-pointer font-semibold bg-blue-100 text-blue-600  rounded-md py-2 px-4 focus:outline-none">
                         Take me there!
                       </button>
-                    </a>
+                    </Link>
                     <button className="font-semibold bg-blue-100 text-blue-600 rounded-md py-2 px-4 focus:outline-none">
                       Development
                     </button>
@@ -80,15 +81,15 @@ const DeveloperPath = () => {
         </div>
 
         <div className="flex justify-center items-center py-5">
-          <a
+          <Link
             href="https://github.com/WebXDAO/blockchain-dev-path"
             target="_blank"
             rel="noreferrer"
           >
             <button className="bg-gray-700 text-white rounded-md py-2 px-8 shadow transform transition hover:scale-85 hover:shadow-lg duration-300 ease-in-out">
               See All
             </button>
-          </a>
+          </Link>
         </div>
       </div>
     </section>

backup src/components/Home/HeroSection/Hero.js

@@ -1,17 +1,17 @@
+import Link from "next/link";
 import CallToActionHero from "./CallToActionHero";
-import DiscordButton from "./DiscordButton";
 import ContributeButton from "./ContributeButton";
-import Link from "next/link";
+import DiscordButton from "./DiscordButton";
 
 export default function Hero() {
   return (
     <>
       <div className="relative h-screen overflow-hidden">
         <section className="h-full">
-          <div className="h-full pt-10 bg-transparent sm:pt-16 lg:overflow-hidden lg:pt-16 lg:pb-14">
+          <div className="h-full bg-transparent pt-10 sm:pt-16 lg:overflow-hidden lg:pb-14 lg:pt-16">
             <div className="mx-auto max-w-7xl lg:px-8">
               <div className="lg:grid lg:grid-cols-2 lg:gap-8">
-                <div className="max-w-md px-4 mx-auto text-center sm:max-w-2xl sm:px-6 sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
+                <div className="mx-auto max-w-md px-4 text-center sm:max-w-2xl sm:px-6 sm:text-center lg:flex lg:items-center lg:px-0 lg:text-left">
                   <div className="lg:py-24">
                     <h1 className="mt-4 text-5xl font-bold tracking-tight text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-7xl">
                       <span className="block">Build with us,</span>
@@ -24,7 +24,7 @@ export default function Hero() {
                     <div className="mt-8 sm:mt-6">
                       <div className="sm:mx-auto sm:max-w-7xl">
                         <div className="sm:flex">
-                          <div className="flex flex-col md:items-center md:justify-center lg:items-start lg:justify-start w-full mb-6 sm:mt-0 md:flex-row gap-x-4 gap-y-4">
+                          <div className="mb-6 flex w-full flex-col gap-x-4 gap-y-4 sm:mt-0 md:flex-row md:items-center md:justify-center lg:items-start lg:justify-start">
                             <DiscordButton></DiscordButton>
                             <ContributeButton></ContributeButton>
                           </div>
@@ -33,17 +33,17 @@ export default function Hero() {
                         <p className="mt-3 text-sm text-white/70 sm:mt-4">
                           We are an opensource community working around the future of the web. Learn
                           blockchain technology together. The community is powered by{" "}
-                          <Link href="https://devprotocol.xyz/">
-                            <a className="font-medium text-white">Dev Protocol</a>
+                          <Link href="https://devprotocol.xyz/" className="font-medium text-white">
+                            Dev Protocol
                           </Link>
                           .
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="mt-12 -mb-16 sm:-mb-48 lg:relative lg:m-0">
-                  <div className="max-w-md px-4 mx-auto sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
+                <div className="-mb-16 mt-12 sm:-mb-48 lg:relative lg:m-0">
+                  <div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
                     <img
                       className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
                       src="/images/shapes/12.png"

backup src/components/Home/Projects.jsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 const Projects = () => {
   const projectsData = [
     {
@@ -32,7 +34,7 @@ const Projects = () => {
             className="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink text-center"
           >
             <div className="flex-1 bg-white overflow-hidden">
-              <a
+              <Link
                 href="#"
                 className="flex flex-wrap no-underline  hover:no-underline"
               >
@@ -45,7 +47,7 @@ const Projects = () => {
                 <p className="text-gray-800 text-base px-6 mb-5 text-center mx-10">
                   {item.text}
                 </p>
-              </a>
+              </Link>
             </div>
           </div>
         ))}

backup src/components/Projects/_RepoCard.js

@@ -1,9 +1,10 @@
 import { FaStar } from "react-icons/fa";
+import Link from "next/link";
 
 const RepoCard = ({ repo }) => {
     const { name, html_url, stargazers_count, language, owner, description, forks_count, open_issues, topics } = repo;
     return (
-        <a href={html_url} target="_blank" rel="noopener noreferrer"
+        <Link href={html_url} target="_blank" rel="noopener noreferrer"
             className="bg-slate-900/60 border flex flex-col justify-between rounded-lg border-gray-700 p-5 shadow delay-100 h-full duration-200 w-full">
             <div>
                 <div className="flex flex-row">
@@ -67,7 +68,7 @@ const RepoCard = ({ repo }) => {
                     </div>
                 </div>
             </div>
-        </a>
+        </Link>
     )
 }