Merge pull request #54 from unstubbable/link-component

Add `Link` component to `@mfng/core/client`

apps/shared-app/src/shared/navigation-item.tsx

@@ -1,6 +1,6 @@
+import {Link} from '@mfng/core/client';
 import {useRouterLocation} from '@mfng/core/use-router-location';
 import * as React from 'react';
-import {Link} from '../client/link.js';
 
 export type NavigationItemProps = React.PropsWithChildren<{
   readonly pathname: string;
@@ -21,10 +21,11 @@ export function NavigationItem({
   }
 
   return (
-    <Link pathname={pathname}>
-      <span className="inline-block rounded-md py-1 px-3 text-zinc-200 hover:bg-zinc-600">
-        {children}
-      </span>
+    <Link
+      to={{pathname}}
+      className="inline-block rounded-md py-1 px-3 text-zinc-200 hover:bg-zinc-600"
+    >
+      {children}
     </Link>
   );
 }

packages/core/src/client/index.ts

@@ -1,2 +1,3 @@
 export * from './hydrate-app.js';
+export * from './link.js';
 export * from './use-router.js';

packages/core/src/client/link.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import {useRouter} from '@mfng/core/client';
+import type {RouterLocation} from '@mfng/core/use-router-location';
+import {useRouterLocation} from '@mfng/core/use-router-location';
+import * as React from 'react';
+import {createUrlPath} from './router-location-utils.js';
+
+export type LinkProps = React.PropsWithChildren<{
+  readonly to: Partial<RouterLocation>;
+  readonly action?: 'push' | 'replace';
+  readonly className?: string;
+}>;
+
+export function Link({
+  children,
+  to,
+  action = `push`,
+  className,
+}: LinkProps): React.ReactNode {
+  const router = useRouter();
+  const location = useRouterLocation();
+
+  const urlPath = createUrlPath({
+    pathname: to.pathname ?? location.pathname,
+    search: to.search ?? ``,
+  });
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+    if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      event.preventDefault();
+      router[action](to);
+    }
+  };
+
+  return (
+    <a href={urlPath} onClick={handleClick} className={className}>
+      {children}
+    </a>
+  );
+}

packages/core/src/client/router.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import type {RouterLocation} from '../use-router-location.js';
 import {createUrl, createUrlPath} from './router-location-utils.js';