fix: button links should be clickable anywhere in the element (#703)

Zipper-Inc · Jan 15, 2024 · 2896eac · 2896eac
1 parent 325a40c
commit 2896eac
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/apps/zipper.dev/src/components/gallery/gallery-item.tsx b/apps/zipper.dev/src/components/gallery/gallery-item.tsx
@@ -12,6 +12,7 @@ import {
 import AppAvatar from '../app-avatar';
 import { RouterOutputs } from '~/utils/trpc';
 import { useState } from 'react';
+import NextLink from 'next/link';
 
 type GalleryItemProps = {
   app: Unpack<GalleryAppQueryOutput>;
@@ -63,15 +64,23 @@ const InnerCard: React.FC<GalleryItemProps> = ({ app }) => {
           </HStack>
           {isHovering ? (
             <HStack spacing={2} pt="3">
-              <Button variant="outline" colorScheme="purple" size="sm">
-                <Link href={`/${app.resourceOwner.slug}/${app.slug}`}>
-                  Open Applet
-                </Link>
+              <Button
+                as={NextLink}
+                href={`/${app.resourceOwner.slug}/${app.slug}`}
+                variant="outline"
+                colorScheme="purple"
+                size="sm"
+              >
+                Open Applet
               </Button>
-              <Button variant="link" colorScheme="purple" size="sm">
-                <Link href={`/gallery/${app.resourceOwner.slug}/${app.slug}`}>
-                  Learn more
-                </Link>
+              <Button
+                as={NextLink}
+                href={`/gallery/${app.resourceOwner.slug}/${app.slug}`}
+                variant="link"
+                colorScheme="purple"
+                size="sm"
+              >
+                Learn More
               </Button>
             </HStack>
           ) : (

diff --git a/apps/zipper.dev/src/pages/gallery/[resource-owner]/[app-slug]/index.tsx b/apps/zipper.dev/src/pages/gallery/[resource-owner]/[app-slug]/index.tsx
@@ -33,6 +33,7 @@ import { isReadme } from '~/utils/playground.utils';
 import type { MonacoEditor } from '~/components/playground/playground-editor';
 import { AnalyticsHead } from '@zipper/utils';
 import { useUser } from '~/hooks/use-user';
+import NextLink from 'next/link';
 
 const EDITOR_OPTIONS = {
   fixedOverflowWidgets: true,
@@ -138,14 +139,14 @@ const AppletLandingPage: NextPageWithLayout = () => {
         <HStack spacing={8} pb={6} justifyContent="space-between" w="full">
           <Heading>{data.name ?? data.slug}</Heading>
           <Button
+            as={NextLink}
+            href={`/${data.resourceOwner.slug}/${data.slug}/src/main.ts`}
             variant="solid"
             colorScheme="purple"
             leftIcon={<HiOutlineTemplate size={20} />}
             fontSize="sm"
           >
-            <Link href={`/${data.resourceOwner.slug}/${data.slug}/src/main.ts`}>
-              Open in Playground
-            </Link>
+            Open in Playground
           </Button>
         </HStack>
 

diff --git a/apps/zipper.run/src/components/footer.tsx b/apps/zipper.run/src/components/footer.tsx
@@ -16,6 +16,7 @@ import { removeExtension } from '@zipper/utils';
 import router from 'next/router';
 import { useMemo } from 'react';
 import { FiChevronUp, FiChevronDown } from 'react-icons/fi';
+import NextLink from 'next/link';
 
 export default function Footer({
   entryPoint,
@@ -58,12 +59,13 @@ export default function Footer({
                 <MenuList pb={0}>
                   <Box pb="4" pt="2" px={4}>
                     <Link
+                      as={NextLink}
                       fontSize="sm"
                       fontWeight="medium"
+                      href={`/${entryPoint.filename}`}
                       onClick={() => {
                         onClose();
                         setLoading(true);
-                        router.push(`/${entryPoint.filename}`);
                       }}
                       _hover={{ background: 'none' }}
                     >