Add TextLink

packages/components/src/components/text-link.stories.tsx

@@ -0,0 +1,31 @@
+import Layout from 'nextra-theme-docs';
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../.storybook/hive-theme-decorator';
+import { ArrowIcon } from './icons';
+import { TextLink, TextLinkProps } from './text-link';
+
+export default {
+  title: 'Components/TextLink',
+  component: TextLink,
+  decorators: [hiveThemeDecorator],
+  args: {
+    href: '#',
+  },
+} satisfies Meta;
+
+export const WithUnderline: StoryObj<TextLinkProps> = {
+  args: {
+    children: 'The Guild',
+  },
+};
+
+export const WithArrow: StoryObj<TextLinkProps> = {
+  args: {
+    children: (
+      <>
+        Learn more
+        <ArrowIcon />
+      </>
+    ),
+  },
+};

packages/components/src/components/text-link.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { cn } from '../cn';
+import { Anchor, AnchorProps } from './anchor';
+import { ArrowIcon } from './icons';
+
+export interface TextLinkProps extends AnchorProps {}
+
+export function TextLink({ className, children, ...rest }: TextLinkProps) {
+  const hasArrow =
+    children &&
+    flattenFragments(children).some(
+      child => typeof child === 'object' && child && 'type' in child && child.type === ArrowIcon,
+    );
+
+  return (
+    <Anchor
+      className={cn(
+        'hive-focus -mx-1 -my-0.5 rounded px-1 py-0.5 hover:text-blue-700',
+        hasArrow ? 'inline-flex items-center gap-2' : 'underline',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </Anchor>
+  );
+}
+
+function flattenFragments(children: React.ReactNode): React.ReactNode[] {
+  return React.Children.toArray(children).flatMap(child =>
+    typeof child === 'object' && 'type' in child && child.type === React.Fragment
+      ? (child.props.children as React.ReactNode[])
+      : child,
+  );
+}