chore(types): improve Link types (#8081)

Author: avivkeller

apps/site/components/Common/Button.tsx

@@ -1,11 +1,9 @@
 import BaseButton from '@node-core/ui-components/Common/BaseButton';
 import type { ButtonProps } from '@node-core/ui-components/Common/BaseButton';
-import type { FC, ComponentProps } from 'react';
+import type { FC } from 'react';
 
 import Link from '#site/components/Link';
 
-const Button: FC<
-  Omit<ButtonProps, 'as'> & Omit<ComponentProps<typeof Link>, 'as' | 'size'>
-> = props => <BaseButton as={Link} {...props} />;
+const Button: FC<ButtonProps> = props => <BaseButton as={Link} {...props} />;
 
 export default Button;

apps/site/components/Link.tsx

@@ -1,25 +1,17 @@
-import type { FC, HTMLProps } from 'react';
+import type { FC, AnchorHTMLAttributes, ComponentProps } from 'react';
 
 import { Link as LocalizedLink } from '#site/navigation.mjs';
 
-const Link: FC<HTMLProps<HTMLAnchorElement>> = ({
-  children,
-  href,
-  ...props
-}) => {
-  if (!href || /^https?:/.test(href.toString())) {
-    return (
-      <a href={href} {...props}>
-        {children}
-      </a>
-    );
+export type LinkProps =
+  | ComponentProps<typeof LocalizedLink>
+  | AnchorHTMLAttributes<HTMLAnchorElement>;
+
+const Link: FC<LinkProps> = ({ href, ...props }) => {
+  if (!href || /^https?:/.test(href as string)) {
+    return <a href={href as string} {...props} />;
   }
 
-  return (
-    <LocalizedLink href={href?.toString()} {...props}>
-      {children}
-    </LocalizedLink>
-  );
+  return <LocalizedLink href={href} {...props} />;
 };
 
 export default Link;

apps/site/components/LinkWithArrow.tsx

@@ -1,12 +1,13 @@
 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 { FC, PropsWithChildren } from 'react';
 
 import Link from '#site/components/Link';
+import type { LinkProps } from '#site/components/Link';
 
 type LinkWithArrowProps =
-  | ({ asChild?: false } & ComponentProps<typeof Link>)
+  | ({ asChild?: false } & LinkProps)
   | ({ asChild: true } & SlotProps);
 
 const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = ({
@@ -17,7 +18,7 @@ const LinkWithArrow: FC<PropsWithChildren<LinkWithArrowProps>> = ({
   const Comp = asChild ? Slot : Link;
 
   return (
-    <Comp {...props}>
+    <Comp {...(props as SlotProps)}>
       <span>
         {children}
         <ArrowUpRightIcon className="ml-1 inline w-3 fill-neutral-600 dark:fill-white" />

apps/site/components/Releases/MinorReleasesTable/index.tsx

@@ -36,23 +36,16 @@ export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
             <td>
               <div className={styles.links}>
                 <Link
-                  kind="neutral"
                   href={`https://nodejs.org/download/release/v${release.version}/`}
                 >
                   {t('components.minorReleasesTable.actions.release')}
                 </Link>
                 <Separator orientation="vertical" />
-                <Link
-                  kind="neutral"
-                  href={`${BASE_CHANGELOG_URL}${release.version}`}
-                >
+                <Link href={`${BASE_CHANGELOG_URL}${release.version}`}>
                   {t('components.minorReleasesTable.actions.changelog')}
                 </Link>
                 <Separator orientation="vertical" />
-                <Link
-                  kind="neutral"
-                  href={getNodeApiUrl(`v${release.version}`)}
-                >
+                <Link href={getNodeApiUrl(`v${release.version}`)}>
                   {t('components.minorReleasesTable.actions.docs')}
                 </Link>
               </div>