refactor(LinkWithArrow): render <a> when href exists and <button> otherwise

Author: Mohit5Upadhyay

apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { use } from 'react';
 
+import LinkWithArrow from '#site/components/LinkWithArrow';
 import { ReleaseModalContext } from '#site/providers/releaseModalProvider';
 import type { NodeRelease } from '#site/types';
 
@@ -18,15 +18,13 @@ const DetailsButton: FC<DetailsButtonProps> = ({ versionData }) => {
   const { openModal } = use(ReleaseModalContext);
 
   return (
-    <button
-      type="button"
-      className="cursor-pointer text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-200"
+    <LinkWithArrow
       onClick={() => openModal(versionData)}
       aria-label={t('details')}
+      className="cursor-pointer"
     >
       {t('details')}
-      <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />
-    </button>
+    </LinkWithArrow>
   );
 };
 

apps/site/components/Downloads/Release/ChangelogLink.tsx

@@ -3,7 +3,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useContext } from 'react';
 
-import Link from '#site/components/Link';
 import LinkWithArrow from '#site/components/LinkWithArrow';
 import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
 import { ReleaseContext } from '#site/providers/releaseProvider';
@@ -12,8 +11,8 @@ const ChangelogLink: FC<PropsWithChildren> = ({ children }) => {
   const { release } = useContext(ReleaseContext);
 
   return (
-    <LinkWithArrow asChild>
-      <Link href={`${BASE_CHANGELOG_URL}${release.version}`}>{children}</Link>
+    <LinkWithArrow href={`${BASE_CHANGELOG_URL}${release.version}`}>
+      {children}
     </LinkWithArrow>
   );
 };

apps/site/components/LinkWithArrow.tsx

@@ -1,28 +1,45 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
-import type { SlotProps } from '@radix-ui/react-slot';
-import { Slot } from '@radix-ui/react-slot';
-import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FC,
+  PropsWithChildren,
+} from 'react';
 
 import Link from '#site/components/Link';
 
 type LinkWithArrowProps =
-  | ({ asChild?: false } & ComponentProps<typeof Link>)
-  | ({ asChild: true } & SlotProps);
+  | ({ href: string } & AnchorHTMLAttributes<HTMLAnchorElement>)
+  | (Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & { href?: never });
 
-const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = ({
-  children,
-  asChild = false,
-  ...props
-}) => {
-  const Comp = asChild ? Slot : Link;
+const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = props => {
+  const { children, className, ...rest } = props;
+
+  if ('href' in props && props.href) {
+    return (
+      <Link
+        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
+        className={className}
+      >
+        <span>
+          {children}
+          <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />
+        </span>
+      </Link>
+    );
+  }
 
   return (
-    <Comp {...props}>
+    <button
+      type="button"
+      {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}
+      className={`${className || ''} text-green-600 hover:text-green-900 dark:text-green-400 dark:hover:text-green-200`}
+    >
       <span>
         {children}
         <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />
       </span>
-    </Comp>
+    </button>
   );
 };