feat: add Link shared component

Renders Next.js Link for internal routes, plain anchor with
target="_blank" rel="noopener noreferrer" when external prop is set.

src/shared/ui/Link/index.ts

@@ -0,0 +1 @@
+export { Link } from './ui/Link/Link';

src/shared/ui/Link/ui/Link/Link.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Link } from './Link';
+
+const meta: Meta<typeof Link> = {
+  title: 'Shared/Link',
+  component: Link,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Internal: Story = {
+  args: {
+    href: '/about',
+    children: 'Internal page',
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-cream">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const External: Story = {
+  args: {
+    href: 'https://example.com',
+    external: true,
+    children: 'External site',
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-8 bg-cream">
+        <Story />
+      </div>
+    ),
+  ],
+};

src/shared/ui/Link/ui/Link/Link.test.tsx

@@ -0,0 +1,82 @@
+vi.mock('next/link', () => ({
+  default: ({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}));
+
+import { render, screen } from '@testing-library/react';
+import type React from 'react';
+import { Link } from './Link';
+
+const BASE = 'underline underline-offset-2 hover:opacity-60 transition-opacity';
+
+describe('internal link', () => {
+  it('renders an anchor element', () => {
+    render(<Link href="/about">About</Link>);
+    expect(screen.getByRole('link', { name: 'About' })).toBeInTheDocument();
+  });
+
+  it('has correct href', () => {
+    render(<Link href="/about">About</Link>);
+    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute('href', '/about');
+  });
+
+  it('does not have target attribute', () => {
+    render(<Link href="/about">About</Link>);
+    expect(screen.getByRole('link', { name: 'About' })).not.toHaveAttribute('target');
+  });
+
+  it('applies base classes', () => {
+    render(<Link href="/about">About</Link>);
+    const link = screen.getByRole('link', { name: 'About' });
+    for (const cls of BASE.split(' ')) {
+      expect(link).toHaveClass(cls);
+    }
+  });
+});
+
+describe('external link', () => {
+  it('has target="_blank"', () => {
+    render(
+      <Link href="https://example.com" external>
+        External
+      </Link>,
+    );
+    expect(screen.getByRole('link', { name: 'External' })).toHaveAttribute('target', '_blank');
+  });
+
+  it('has rel="noopener noreferrer"', () => {
+    render(
+      <Link href="https://example.com" external>
+        External
+      </Link>,
+    );
+    expect(screen.getByRole('link', { name: 'External' })).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('has correct href', () => {
+    render(
+      <Link href="https://example.com" external>
+        External
+      </Link>,
+    );
+    expect(screen.getByRole('link', { name: 'External' })).toHaveAttribute('href', 'https://example.com');
+  });
+});
+
+describe('className passthrough', () => {
+  it('merges custom className with base classes', () => {
+    render(
+      <Link href="/about" className="text-red-500">
+        Styled
+      </Link>,
+    );
+    const link = screen.getByRole('link', { name: 'Styled' });
+    expect(link).toHaveClass('text-red-500');
+    for (const cls of BASE.split(' ')) {
+      expect(link).toHaveClass(cls);
+    }
+  });
+});

src/shared/ui/Link/ui/Link/Link.tsx

@@ -0,0 +1,47 @@
+import NextLink from 'next/link';
+import type { ReactNode } from 'react';
+import { cn } from '$shared/lib';
+
+/**
+ * Props for Link.
+ */
+interface Props {
+  /**
+   * Destination URL. Use a path (e.g. /about) for internal routes, or a full URL for external.
+   */
+  href: string;
+  /**
+   * Link content
+   */
+  children: ReactNode;
+  /**
+   * CSS classes
+   */
+  className?: string;
+  /**
+   * When true, renders a plain <a> with target="_blank" rel="noopener noreferrer".
+   * Use for links that open outside the app.
+   */
+  external?: boolean;
+}
+
+const BASE = 'underline underline-offset-2 hover:opacity-60 transition-opacity';
+
+/**
+ * Inline text link.
+ * Renders as Next.js Link for internal routes, plain <a> for external links.
+ */
+export function Link({ href, children, className, external }: Props) {
+  if (external) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={cn(BASE, className)}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <NextLink href={href} className={cn(BASE, className)}>
+      {children}
+    </NextLink>
+  );
+}

src/shared/ui/index.ts

@@ -6,6 +6,7 @@ export type { CardBackground } from './Card';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardSidebar, CardTitle } from './Card';
 
 export { Input, Textarea } from './Input';
+export { Link } from './Link';
 export { RichText } from './RichText';
 export type { ContainerSize, SectionBackground } from './Section';
 export { Container, Section } from './Section';