fix: use react-router link component

Author: mu29

packages/docs/package.json

@@ -18,6 +18,7 @@
     "lucide-react": "0.556.0",
     "react": "19.1.2",
     "react-dom": "19.1.2",
+    "react-router": "7.9.4",
     "shiki": "3.19.0",
     "tailwind-merge": "3.4.0",
     "tailwind-variants": "3.2.2",

packages/docs/src/page-cloud/CloudHeroBanner/CloudHeroBanner.tsx

@@ -11,7 +11,7 @@ export const CloudHeroBanner: FC<unknown> = () => (
     </Body>
     <HStack className={['gap-8', 'mt-16']}>
       <Button variant="primary" size="lg" asChild={true}>
-        <Link href="https://app.composify.cloud" plain={true}>
+        <Link href="https://app.composify.cloud" target="_blank" plain={true}>
           Start free ›
         </Link>
       </Button>

packages/docs/src/ui-system/Link/Link.tsx

@@ -1,4 +1,5 @@
 import type { ComponentProps, FC } from 'react';
+import { Link as RouterLink } from 'react-router';
 import type { VariantProps } from 'tailwind-variants';
 import { variants } from './LinkVariants';
 
@@ -7,6 +8,12 @@ type Props = Omit<ComponentProps<'a'>, 'className'> &
     className?: string[];
   };
 
-export const Link: FC<Props> = ({ className, plain, href, ...props }) => (
-  <a className={variants({ className, plain })} href={href} {...props} />
-);
+export const Link: FC<Props> = ({ className, plain, href, ...props }) => {
+  const isExternal = href?.match(/^(https?:|mailto:|tel:)/);
+
+  if (isExternal) {
+    return <a className={variants({ className, plain })} href={href} {...props} />;
+  }
+
+  return <RouterLink className={variants({ className, plain })} to={href ?? ''} {...props} />;
+};