Create Link typography component

src/components/link/index.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+const linkVariants = cva(
+  'leading-tight inline-flex items-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        underline: 'underline underline-offset-4',
+        hover: 'hover:underline hover:underline-offset-4',
+      },
+      textColor: {
+        primary: 'text-primary hover:text-primary/80',
+        inherit: 'text-inherit hover:opacity-80',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      textColor: 'primary',
+    },
+  }
+)
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  asChild?: boolean
+}
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, variant, textColor, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a'
+    return <Comp className={cn(linkVariants({ variant, textColor, className }))} ref={ref} {...props} />
+  }
+)
+Link.displayName = 'Link'
+
+export { Link, linkVariants }

src/stories/Typography/Typography.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Link } from '../../components/link'
+
+const meta = {
+  title: 'Typography/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'underline', 'hover'],
+      description: 'The visual style variant of the link',
+    },
+    textColor: {
+      control: 'select',
+      options: ['primary', 'inherit'],
+      description: 'The text color scheme of the link',
+      defaultValue: 'primary',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'When true, renders the child component with Link styles and props merged.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for custom styling',
+    },
+  },
+} satisfies Meta<typeof Link>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Oasis Explorer',
+    href: '#',
+    textColor: 'primary',
+  },
+}

src/styles/global.css

@@ -12,7 +12,7 @@
   --card-foreground: hsl(240 10% 4%);
   --popover: hsl(0 0% 100%);
   --popover-foreground: hsl(240 10% 4%);
-  --primary: hsl(241 100% 44%);
+  --primary: hsl(241.33 100% 44.31%);
   --primary-foreground: hsl(0 0% 98%);
   --secondary: hsl(240 5% 96%);
   --secondary-foreground: hsl(240 6% 10%);