mova-store/components/SkipLink.tsx at main · ghzhost/mova-store · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
"use client";

/**
 * SkipLink Component
 *
 * Provides a hidden link that becomes visible on focus, allowing
 * keyboard users to skip navigation and go directly to main content.
 *
 * Usage:
 * 1. Add <SkipLink /> at the beginning of your layout
 * 2. Add id="main-content" to your main content wrapper
 *
 * Example:
 * ```tsx
 * <body>
 *   <SkipLink />
 *   <nav>...</nav>
 *   <main id="main-content">...</main>
 * </body>
 * ```
 */
export default function SkipLink({
  href = "#main-content",
  children = "Skip to main content",
}: {
  href?: string;
  children?: React.ReactNode;
}) {
  return (
    <a
      href={href}
      className="
        sr-only focus:not-sr-only
        focus:fixed focus:top-4 focus:left-4 focus:z-[100]
        focus:px-4 focus:py-2 focus:rounded-lg
        focus:bg-purple-600 focus:text-white focus:font-medium
        focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2
        transition-transform
      "
    >
      {children}
    </a>
  );
}

/**
 * SkipLinks Component
 *
 * Multiple skip links for complex pages with multiple sections.
 */
export function SkipLinks({
  links,
}: {
  links: Array<{ href: string; label: string }>;
}) {
  return (
    <nav aria-label="Skip links" className="sr-only focus-within:not-sr-only">
      <ul className="fixed top-4 left-4 z-[100] flex flex-col gap-2">
        {links.map((link) => (
          <li key={link.href}>
            <a
              href={link.href}
              className="
                sr-only focus:not-sr-only
                focus:block focus:px-4 focus:py-2 focus:rounded-lg
                focus:bg-purple-600 focus:text-white focus:font-medium
                focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2
              "
            >
              {link.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}