Update nesting of Button and Link components

The Link component is modified to be nested within the Button component in various JSX files. This change was made with the aid of the 'asChild' property, it ensures that the link remains operable even when wrapped by the button, improving the site's semantics and accessibility.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -71,15 +71,15 @@ function AuthButtons() {
       <div className={'hidden space-x-0.5 md:flex'}>
         <ModeToggle className={textClassName} />
 
-        <Link href={pathsConfig.auth.signIn}>
+        <Button asChild variant={'ghost'} className={textClassName}>
-          <Button variant={'ghost'} className={textClassName}>
+          <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:signIn'} />
-          </Button>
+          </Link>
-        </Link>
+        </Button>
       </div>
 
-      <Link href={pathsConfig.auth.signUp}>
+      <Button asChild className="group" variant={'default'}>
-        <Button className="group" variant={'default'}>
+        <Link href={pathsConfig.auth.signUp}>
           <Trans i18nKey={'auth:signUp'} />
 
           <ChevronRight
@@ -87,8 +87,8 @@ function AuthButtons() {
               'ml-1 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1'
             }
           />
-        </Button>
+        </Link>
-      </Link>
+      </Button>
     </div>
   );
 }

apps/web/app/(marketing)/_components/site-navigation.tsx

@@ -70,7 +70,7 @@ function MobileDropdown() {
           const className = 'flex w-full h-full items-center';
 
           return (
-            <DropdownMenuItem key={item.path}>
+            <DropdownMenuItem key={item.path} asChild>
               <Link className={className} href={item.path}>
                 <Trans i18nKey={item.label} />
               </Link>

apps/web/app/(marketing)/faq/page.tsx

@@ -86,15 +86,15 @@ async function FAQPage() {
           </div>
 
           <div>
-            <Link href={'/contact'}>
+            <Button variant={'outline'}>
-              <Button variant={'outline'}>
+              <Link asChild href={'/contact'}>
                 <span>
                   <Trans i18nKey={'marketing:contactFaq'} />
                 </span>
 
                 <ArrowRight className={'ml-2 w-4'} />
-              </Button>
+              </Link>
-            </Link>
+            </Button>
           </div>
         </div>
       </div>

apps/web/app/(marketing)/page.tsx

@@ -347,14 +347,14 @@ function FeatureContainer(
 function MainCallToActionButton() {
   return (
     <div className={'flex space-x-2'}>
-      <Link href={'/docs'}>
+      <Button asChild variant={'link'}>
-        <Button variant={'link'}>
+        <Link href={'/docs'}>
           <Trans i18nKey={'common:documentation'} />
-        </Button>
+        </Link>
-      </Link>
+      </Button>
 
-      <Link href={'/auth/sign-up'}>
+      <Button asChild>
-        <Button>
+        <Link href={'/auth/sign-up'}>
           <span className={'flex items-center space-x-0.5'}>
             <span>
               <Trans i18nKey={'common:getStarted'} />
@@ -367,8 +367,8 @@ function MainCallToActionButton() {
               }
             />
           </span>
-        </Button>
+        </Link>
-      </Link>
+      </Button>
     </div>
   );
 }

apps/web/app/auth/callback/error/page.tsx

@@ -39,7 +39,7 @@ function AuthCallbackErrorPage({ searchParams }: Params) {
         </Alert>
       </div>
 
-      <Button>
+      <Button asChild>
         <Link href={signInPath}>
           <Trans i18nKey={'auth:signIn'} />
         </Link>

apps/web/app/auth/password-reset/page.tsx

@@ -31,11 +31,11 @@ function PasswordResetPage() {
         <PasswordResetRequestContainer redirectPath={redirectPath} />
 
         <div className={'flex justify-center text-xs'}>
-          <Link href={signIn}>
+          <Button asChild variant={'link'} size={'sm'}>
-            <Button variant={'link'} size={'sm'}>
+            <Link href={signIn}>
               <Trans i18nKey={'auth:passwordRecoveredQuestion'} />
-            </Button>
+            </Link>
-          </Link>
+          </Button>
         </div>
       </div>
     </>

apps/web/app/auth/sign-in/page.tsx

@@ -33,11 +33,11 @@ function SignInPage() {
       <SignInMethodsContainer paths={paths} providers={authConfig.providers} />
 
       <div className={'flex justify-center'}>
-        <Link href={pathsConfig.auth.signUp}>
+        <Button asChild variant={'link'} size={'sm'}>
-          <Button variant={'link'} size={'sm'}>
+          <Link href={pathsConfig.auth.signUp}>
             <Trans i18nKey={'auth:doNotHaveAccountYet'} />
-          </Button>
+          </Link>
-        </Link>
+        </Button>
       </div>
     </>
   );

apps/web/app/auth/sign-up/page.tsx

@@ -45,11 +45,11 @@ function SignUpPage({ searchParams }: Props) {
       />
 
       <div className={'justify-centers flex'}>
-        <Link href={pathsConfig.auth.signIn}>
+        <Button asChild variant={'link'} size={'sm'}>
-          <Button variant={'link'} size={'sm'}>
+          <Link href={pathsConfig.auth.signIn}>
             <Trans i18nKey={'auth:alreadyHaveAnAccount'} />
-          </Button>
+          </Link>
-        </Link>
+        </Button>
       </div>
     </>
   );

apps/web/app/join/page.tsx

@@ -119,12 +119,12 @@ function InviteNotFoundOrExpired() {
         <Trans i18nKey={'teams:inviteNotFoundOrExpiredDescription'} />
       </p>
 
-      <Link href={pathsConfig.app.home}>
+      <Button asChild className={'w-full'} variant={'outline'}>
-        <Button className={'w-full'} variant={'outline'}>
+        <Link href={pathsConfig.app.home}>
           <ArrowLeft className={'mr-2 w-4'} />
           <Trans i18nKey={'teams:backToHome'} />
-        </Button>
+        </Link>
-      </Link>
+      </Button>
     </div>
   );
 }

apps/web/app/not-found.tsx

@@ -56,13 +56,13 @@ const NotFoundPage = async () => {
               </p>
             </div>
 
-            <Link href={'/'}>
+            <Button asChild variant={'outline'}>
-              <Button variant={'outline'}>
+              <Link href={'/'}>
                 <ArrowLeft className={'mr-2 h-4'} />
 
                 <Trans i18nKey={'common:backToHomePage'} />
-              </Button>
+              </Link>
-            </Link>
+            </Button>
           </div>
         </div>
       </div>

packages/features/auth/src/components/password-sign-in-form.tsx

@@ -88,16 +88,17 @@ export const PasswordSignInForm: React.FC<{
 
               <FormMessage />
 
-              <Link href={'/auth/password-reset'}>
+              <Button
-                <Button
+                asChild
-                  type={'button'}
+                type={'button'}
-                  size={'sm'}
+                size={'sm'}
-                  variant={'link'}
+                variant={'link'}
-                  className={'text-xs'}
+                className={'text-xs'}
-                >
+              >
+                <Link href={'/auth/password-reset'}>
                   <Trans i18nKey={'auth:passwordForgottenQuestion'} />
-                </Button>
+                </Link>
-              </Link>
+              </Button>
             </FormItem>
           )}
         />

packages/ui/src/makerkit/sidebar.tsx

@@ -164,14 +164,15 @@ export function SidebarItem({
   const size = collapsed ? 'icon' : 'sm';
 
   return (
-    <Link key={path} href={path}>
+    <Button
-      <Button
+      asChild
-        className={cn('flex w-full text-sm shadow-none', {
+      className={cn('flex w-full text-sm shadow-none', {
-          'justify-start space-x-2': !collapsed,
+        'justify-start space-x-2': !collapsed,
-        })}
+      })}
-        size={size}
+      size={size}
-        variant={variant}
+      variant={variant}
-      >
+    >
+      <Link key={path} href={path}>
         <If condition={collapsed} fallback={Icon}>
           <TooltipProvider>
             <Tooltip>
@@ -185,8 +186,8 @@ export function SidebarItem({
         </If>
 
         <span className={cn({ hidden: collapsed })}>{children}</span>
-      </Button>
+      </Link>
-    </Link>
+    </Button>
   );
 }