replace nested Button with LinkButton component

Author: devKiratu

src/components/HeroHeader/DesktopHero.tsx

@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import React from 'react';
-import Button from '../Button/Button';
 import Navbar from '../Navbar';
 import bgImage from '../../../public/images/hero-image.svg';
+import LinkButton from '../LinkButton/LinkButton';
 
 export default function HeroHeader() {
   return (
@@ -26,15 +26,14 @@ export default function HeroHeader() {
           its ecosystem.
         </p>
         <div className="flex items-center justify-center mb-44 relative">
-          <a
-            target="_blank"
+          <LinkButton
+            className="flex justify-center items-center bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
             href="https://bit.ly/joinreactdevske"
+            target="_blank"
             rel="noopener noreferrer"
           >
-            <Button className="bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold">
-              Join ReactDevsKe
-            </Button>
-          </a>
+            Join ReactDevsKe
+          </LinkButton>
         </div>
       </div>
     </div>

src/components/HeroHeader/DropdownMenu.tsx

@@ -1,10 +1,10 @@
 import Image from 'next/image';
 import React from 'react';
-import Button from '../Button/Button';
 import infoIcon from '../../../public/img/info-icon.svg';
 import calendarIcon from '../../../public/img/calendar-icon.svg';
 import contactIcon from '../../../public/img/contact-icon.svg';
 import { ABOUT, CONTACT, EVENTS } from '../../util/routeConstants';
+import LinkButton from '../LinkButton/LinkButton';
 
 interface DropdownMenuProps {
   onCloseMenu: () => void;
@@ -46,17 +46,15 @@ export default function DropdownMenu({ onCloseMenu }: DropdownMenuProps) {
         </li>
       </ul>
       <div className="">
-        <a
-          target="_blank"
+        <LinkButton
+          className="flex justify-center items-center bg-[#12A04E] text-white w-full font-montserrat text-xs py-[10px]"
           href="https://bit.ly/joinreactdevske"
+          target="_blank"
           rel="noopener noreferrer"
-          className="w-full"
           onClick={() => onCloseMenu()}
         >
-          <Button className="bg-[#12A04E] text-white w-full font-montserrat text-xs py-[10px]">
-            Join React.JS Kenya
-          </Button>
-        </a>
+          Join React.JS Kenya
+        </LinkButton>
       </div>
     </div>
   );

src/components/HeroHeader/MobileHero.tsx

@@ -4,8 +4,8 @@ import Logo from '../Logo';
 import githubIcon from '../../../public/img/github-logo.svg';
 import menuIcon from '../../../public/img/menu-icon.svg';
 import closeIcon from '../../../public/img/close-icon.svg';
-import Button from '../Button/Button';
 import DropdownMenu from './DropdownMenu';
+import LinkButton from '../LinkButton/LinkButton';
 
 export default function MobileHero() {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -53,15 +53,14 @@ export default function MobileHero() {
           ReactDevsKe
         </h1>
         <div className="flex justify-center items-center mb-[34px]">
-          <a
-            target="_blank"
+          <LinkButton
             href="https://bit.ly/joinreactdevske"
+            target="_blank"
             rel="noopener noreferrer"
+            className="flex justify-center items-center bg-[#12A04E] text-white w-44 rounded-md"
           >
-            <Button className="bg-[#12A04E] text-white w-44 rounded-md">
-              Join React.JS Kenya
-            </Button>
-          </a>
+            Join React.JS Kenya
+          </LinkButton>
         </div>
         <p className="font-montserrat text-[#535353] text-xs text-center px-4">
           We are a tech community in Kenya focused on the React JS library and

src/components/Navbar/Navbar.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Logo from '../Logo/Logo';
 
 import { ABOUT, CONTACT, EVENTS, HOME } from '../../util/routeConstants';
-import Button from '../Button/Button';
+import LinkButton from '../LinkButton/LinkButton';
 
 export default function Navbar() {
   return (
@@ -31,15 +31,14 @@ export default function Navbar() {
             </ul>
           </div>
           <div>
-            <a
-              target="_blank"
+            <LinkButton
+              className="flex justify-center items-center bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold"
               href="https://bit.ly/joinreactdevske"
+              target="_blank"
               rel="noopener noreferrer"
             >
-              <Button className="bg-[#EC0505] w-[203px] h-[46px] rounded-md text-base text-white font-montserrat font-bold">
-                Join Community
-              </Button>
-            </a>
+              Join Community
+            </LinkButton>
           </div>
         </nav>
       </header>