add ipa reader

src/app/page.tsx

@@ -16,6 +16,7 @@ export default function Home() {
         <div className="LinkList flex flex-wrap sm:flex-row">
           <MyLink href="/srt-player" label="srt-player"></MyLink>
           <MyLink href="/word-board" label="word-board"></MyLink>
+          <MyLink href="/ipa-reader" label="ipa-reader"></MyLink>
           <MyLink href={'/changelog.txt'} label="changelog"></MyLink>
         </div>
       </div>

src/app/srt-player/components/VideoPlayer/SubtitleDisplay.tsx

@@ -1,4 +1,4 @@
-import { inspect } from "@/utilities";
+import { inspect } from "@/utils";
 
 export default function SubtitleDisplay({ subtitle }: { subtitle: string }) {
     const words = subtitle.match(/\b[\w']+(?:-[\w']+)*\b/g) || [];

src/app/srt-player/layout.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "../globals.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

src/app/word-board/layout.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "../globals.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

src/app/word-board/page.tsx

@@ -4,7 +4,7 @@ import Button from "../../components/Button";
 import { KeyboardEvent, useRef, useState } from "react";
 import Word from "@/interfaces/Word";
 import { BOARD_WIDTH, TEXT_WIDTH, BOARD_HEIGHT, TEXT_SIZE } from "@/constants";
-import { inspect } from "@/utilities";
+import { inspect } from "@/utils";
 
 export default function Home() {
   const inputRef = useRef<HTMLInputElement>(null);

src/components/Button.tsx

@@ -1,6 +1,6 @@
-export default function Button({ label, onClick }: { label: string, onClick?: () => void }) {
+export default function Button({ label, onClick, className }: { label: string, onClick?: () => void, className?: string }) {
   return (
-    <button onClick={onClick} className="px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300">
+    <button onClick={onClick} className={`px-2 py-1 rounded bg-white shadow-2xs font-bold hover:bg-gray-300 ${className || ''}`}>
       {label}
     </button>
   );

src/utilities.ts

@@ -1,9 +0,0 @@
-export function inspect(word: string) {
-    const goto = (url: string) => {
-        window.open(url, '_blank');
-    }
-    return () => {
-        word = word.toLowerCase();
-        goto(`https://www.youdao.com/result?word=${word}&lang=en`);
-    }
-}