Skip Link

import SkipLink from "@/components/ui/skip-link";

export default function SkipLinkDemo() {
  return (
    <div className="relative flex h-screen w-full flex-col bg-background text-foreground">
      <SkipLink>Skip to content</SkipLink>
      <header className="flex items-center justify-between border-b border-border px-6 py-4">
        <span className="text-sm font-semibold">laikit UI</span>
        <nav
          aria-label="Primary"
          className="flex gap-4 text-sm text-muted-foreground"
        >
          <a href="#">Docs</a>
          <a href="#">Components</a>
          <a href="#">GitHub</a>
        </nav>
      </header>
      <main
        id="main-content"
        tabIndex={-1}
        className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center"
      >
        <p className="text-sm font-medium">Press Tab, then Enter</p>
        <p className="max-w-sm text-sm text-muted-foreground">
          Tabbing from the top of the page reveals the hidden skip link;
          activating it jumps focus straight here, past the header navigation.
        </p>
      </main>
    </div>
  );
}