BUG FIX: Link still clickable outside button when other button was no…

…t available
mbeps · Sep 6, 2024 · c4dc663 · c4dc663
1 parent 60b9579
commit c4dc663
Showing 1 changed file with 49 additions and 45 deletions.
diff --git a/app/projects/[projectKey]/page.tsx b/app/projects/[projectKey]/page.tsx
@@ -330,57 +330,61 @@ const ProjectPage: React.FC<ProjectPageProps> = ({ params }) => {
               <HeadingThree title="Links" />
               <div
                 className="
-                mt-6 flex 
-                flex-row 
-                justify-center md:justify-start items-center 
-                w-full md:w-1/3
-                gap-2"
+                  mt-6 flex 
+                  flex-row 
+                  justify-center md:justify-start items-center 
+                  w-full md:w-1/3
+                  gap-2"
               >
                 {/* GitHub Repo */}
                 {projectData?.repositoryURL && (
-                  <Link
-                    href={projectData?.repositoryURL}
-                    target="_blank"
-                    className="w-full"
-                  >
-                    <Button>
-                      <div
-                        className="
-                          flex
-                          justify-center md:justify-start
-                          align-center
-                          gap-4
-                          w-full
-                        "
-                      >
-                        <BsGithub size={26} />
-                        <p>Repository</p>
-                      </div>
-                    </Button>
-                  </Link>
+                  <div className="w-1/2">
+                    <Link
+                      href={projectData?.repositoryURL}
+                      target="_blank"
+                      className="w-full"
+                    >
+                      <Button className="w-full">
+                        <div
+                          className="
+                            flex
+                            justify-center md:justify-start
+                            align-center
+                            gap-4
+                            w-full
+                          "
+                        >
+                          <BsGithub size={26} />
+                          <p>Repository</p>
+                        </div>
+                      </Button>
+                    </Link>
+                  </div>
                 )}
                 {/* Website */}
                 {projectData?.deploymentURL && (
-                  <Link
-                    href={projectData?.deploymentURL}
-                    target="_blank"
-                    className="w-full"
-                  >
-                    <Button>
-                      <div
-                        className="
-                          flex
-                          justify-center md:justify-start
-                          align-center
-                          gap-4
-                          w-full
-                        "
-                      >
-                        <BsArrowUpRightCircle size={26} />
-                        <p>Deployment</p>
-                      </div>
-                    </Button>
-                  </Link>
+                  <div className="w-1/2">
+                    <Link
+                      href={projectData?.deploymentURL}
+                      target="_blank"
+                      className="w-full"
+                    >
+                      <Button className="w-full">
+                        <div
+                          className="
+                            flex
+                            justify-center md:justify-start
+                            align-center
+                            gap-4
+                            w-full
+                          "
+                        >
+                          <BsArrowUpRightCircle size={26} />
+                          <p>Deployment</p>
+                        </div>
+                      </Button>
+                    </Link>
+                  </div>
                 )}
               </div>
             </div>