makima/frontend/src/components/RewriteLink.tsx


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

import { Link } from "react-router";
import { useTextScramble } from "../hooks/useTextScramble";

interface RewriteLinkProps {
  to?: string;
  href?: string;
  children: string;
  disabled?: boolean;
  external?: boolean;
  className?: string;
}

export function RewriteLink({
  to,
  href,
  children,
  disabled = false,
  external = false,
  className = "",
}: RewriteLinkProps) {
  const { displayText, scramble, reset } = useTextScramble(children);

  const baseClass = `rewrite-link ${className}`;

  if (disabled) {
    return (
      <span
        className={baseClass}
        aria-disabled="true"
        onMouseEnter={scramble}
        onMouseLeave={reset}
      >
        {displayText}
      </span>
    );
  }

  if (external || href) {
    return (
      <a
        href={href || to}
        target="_blank"
        rel="noopener noreferrer"
        className={baseClass}
        onMouseEnter={scramble}
        onMouseLeave={reset}
      >
        {displayText}
      </a>
    );
  }

  return (
    <Link
      to={to || "/"}
      className={baseClass}
      onMouseEnter={scramble}
      onMouseLeave={reset}
    >
      {displayText}
    </Link>
  );
}