Update makima FE to add initial listening system

1 files changed, 63 insertions, 0 deletions

diff --git a/makima/frontend/src/components/RewriteLink.tsx b/makima/frontend/src/components/RewriteLink.tsx
new file mode 100644
index 0000000..6e591a1
--- /dev/null
+++ b/makima/frontend/src/components/RewriteLink.tsx
@@ -0,0 +1,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>
+  );
+}