A Link component is a UI element that allows users to navigate from one page or section to another within a web application or website. Typically styled as underlined text or buttons, links provide a clear indication of interactivity. They can point to internal or external resources and often include features like hover effects or icons to enhance user experience and accessibility.

# Demo

1. Basic Anchor (external link by default)

External Link

2. Anchor with custom target, rel, and className

Custom Anchor

3. Span as a button (with onClick)

Clickable Span

4. Styled Span

Styled Span

5. Advanced: All props supported

About (Internal Link)
Do Something

6. Accessibility: Keyboard activation

Focus me and press Enter or Space

# Attributes

Name	Type	Default	Details
href	string	''	URL to link to. If provided, renders an <a>.
onClick	(e: MouseEvent) => void		Click handler. If href is not provided, renders a <span>.
className	string	''	Custom CSS classes.
target	string		Target for anchor links (e.g., _blank, _self).
rel	string		Rel attribute for anchor links.
children	ReactNode	Required	Content inside the link.

# Usage

import { NLink } from 'nayan';

const handleClick = () => alert('Span clicked!');
const doSomething = (e) => alert('Custom action!');

const Link = () => {
  return (
    <>
      <div className="mb-4">
        <NLink href="https://example.com">External Link</NLink>
      </div>

      <div className="mb-4">
        <NLink href="https://example.com" target="_self" rel="nofollow" className="text-blue-700 underline">
          Custom Anchor
        </NLink>
      </div>

      <div className="mb-4">
        <NLink onClick={handleClick}>Clickable Span</NLink>
      </div>

      <div className="mb-4">
        <NLink className="font-bold text-green-700" onClick={handleClick}>
          Styled Span
        </NLink>
      </div>

      <div className="mb-4">
        <NLink href="/about" className="underline text-purple-700">About (Internal Link)</NLink>
        <br />
        <NLink className="cursor-pointer text-orange-700" onClick={doSomething}>
          Do Something
        </NLink>
      </div>

      <div className="mb-4">
        <NLink onClick={handleClick}>Focus me and press Enter or Space</NLink>
      </div>
    </>
  );
};

export default Link;