...

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "GPL-3.0-only",
       "dependencies": {
+        "@material-tailwind/react": "^2.1.10",
         "clsx": "^2.1.1",
         "edge-tts-universal": "^1.3.2",
         "motion": "^12.23.24",
@@ -1882,6 +1883,23 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
@@ -2615,6 +2633,59 @@
         "excpretty": "build/cli.js"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.19.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/react/-/react-0.19.0.tgz",
+      "integrity": "sha512-fgYvN4ksCi5OvmPXkyOT8o5a8PSKHMzPHt+9mR6KYWdF16IAjWRLZPAAziI2sznaWT23drRFrYw64wdvYqqaQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^1.2.2",
+        "aria-hidden": "^1.1.3",
+        "tabbable": "^6.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "1.3.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/react-dom/-/react-dom-1.3.0.tgz",
+      "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -3438,6 +3509,161 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@material-tailwind/react": {
+      "version": "2.1.10",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@material-tailwind/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-xGU/mLDKDBp/qZ8Dp2XR7fKcTpDuFeZEBqoL9Bk/29kakKxNxjUGYSRHEFLsyOFf4VIhU6WGHdIS7tOA3QGJHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "0.19.0",
+        "classnames": "2.3.2",
+        "deepmerge": "4.2.2",
+        "framer-motion": "6.5.1",
+        "material-ripple-effects": "2.0.1",
+        "prop-types": "15.8.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "tailwind-merge": "1.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@material-tailwind/react/node_modules/tailwind-merge": {
+      "version": "1.8.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/tailwind-merge/-/tailwind-merge-1.8.1.tgz",
+      "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww==",
+      "license": "MIT"
+    },
+    "node_modules/@motionone/animation": {
+      "version": "10.18.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@motionone/animation/-/animation-10.18.0.tgz",
+      "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/easing": "^10.18.0",
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.18.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@motionone/easing/-/easing-10.18.0.tgz",
+      "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.18.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@motionone/generators/-/generators-10.18.0.tgz",
+      "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "@motionone/utils": "^10.18.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.17.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@motionone/types/-/types-10.17.1.tgz",
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==",
+      "license": "MIT"
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.18.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@motionone/utils/-/utils-10.18.0.tgz",
+      "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/types": "^10.17.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -6624,6 +6850,12 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "license": "MIT"
+    },
     "node_modules/cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -8860,6 +9092,15 @@
         }
       }
     },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/freeport-async": {
       "version": "2.0.0",
       "resolved": "https://mirrors.cloud.tencent.com/npm/freeport-async/-/freeport-async-2.0.0.tgz",
@@ -9325,6 +9566,12 @@
         "hermes-estree": "0.29.1"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
     "node_modules/hosted-git-info": {
       "version": "7.0.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
@@ -10331,7 +10578,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -10937,7 +11183,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -10994,6 +11239,12 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/material-ripple-effects": {
+      "version": "2.0.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz",
+      "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -11794,7 +12045,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -12371,6 +12621,18 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "license": "MIT",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -12524,7 +12786,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -12726,7 +12987,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-native": {
@@ -14149,6 +14409,16 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "license": "MIT",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -14248,6 +14518,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.3.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/tabbable/-/tabbable-6.3.0.tgz",
+      "integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://mirrors.cloud.tencent.com/npm/tailwind-merge/-/tailwind-merge-3.3.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@material-tailwind/react": "^2.1.10",
     "clsx": "^2.1.1",
     "edge-tts-universal": "^1.3.2",
     "motion": "^12.23.24",

src/app/alphabet/page.tsx

@@ -49,10 +49,18 @@ export default function Alphabet() {
         <div className="border border-gray-200 m-4 mt-4 flex flex-col justify-center items-center p-4 rounded-2xl gap-2">
             <span className="text-2xl md:text-3xl">请选择您想学习的字符</span>
             <div className="flex gap-1 flex-wrap">
-                <Button label="日语假名" onClick={() => setChosenAlphabet('japanese')}></Button>
+                <Button onClick={() => setChosenAlphabet('japanese')}>
-                <Button label="英文字母" onClick={() => setChosenAlphabet('english')}></Button>
+                    日语假名
-                <Button label="维吾尔字母" onClick={() => setChosenAlphabet('uyghur')}></Button>
+                </Button>
-                <Button label="世界语字母" onClick={() => setChosenAlphabet('esperanto')}></Button>
+                <Button onClick={() => setChosenAlphabet('english')}>
+                    英文字母
+                </Button>
+                <Button onClick={() => setChosenAlphabet('uyghur')}>
+                    维吾尔字母
+                </Button>
+                <Button onClick={() => setChosenAlphabet('esperanto')}>
+                    世界语字母
+                </Button>
             </div>
         </div>
     </>

src/app/memorize/page.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import Button from "@/components/Button";
+import { Select, Option } from "@material-tailwind/react";
+import { ChangeEvent, useState } from "react";
+
+interface ACardProps {
+    children?: React.ReactNode,
+    className?: string
+}
+
+function ACard({ children, className }: ACardProps) {
+    return (
+        <div className={`w-[61vw] h-96 p-2 shadow-2xl bg-[#00BCD4] rounded-xl ${className}`}>
+            {children}
+        </div>);
+}
+
+interface BCard {
+    children?: React.ReactNode,
+    className?: string
+}
+function BCard({ children, className }: BCard) {
+    return (
+        <div className={`border border-[#0097A7] rounded-xl p-2 ${className}`}>
+            {children}
+        </div>);
+}
+
+interface WordData {
+    locale1: string,
+    locale2: string,
+    data: Record<string, string>
+}
+
+export default function Memorize() {
+    const [pageState, setPageState] = useState<'choose' | 'start' | 'main' | 'edit'>('edit');
+    const [wordData, setWordData] = useState<WordData>({
+        locale1: 'en-US',
+        locale2: 'zh-CN',
+        data: { 'hello': '你好' }
+    });
+    if (pageState === 'main') {
+        return (<>
+            <div className="w-full h-screen flex justify-center items-center">
+                <ACard>
+                    <h1 className="text-center font-extrabold text-4xl text-white m-2 mb-4">
+                        Memorize
+                    </h1>
+                    <div className="w-full text-white">
+                        <BCard>
+                            <p>Lang1: {wordData.locale1}</p>
+                            <p>Lang2: {wordData.locale2}</p>
+                            <p>Total Words: {Object.keys(wordData.data).length}</p>
+                        </BCard>
+                    </div>
+                    <div className="w-full flex items-center justify-center">
+                        <BCard className="flex gap-2 justify-center items-center w-fit">
+                            <Button>Start</Button>
+                            <Button>Load</Button>
+                            <Button>Save</Button>
+                            <Button onClick={() => setPageState('edit')}>Edit</Button>
+                        </BCard>
+                    </div>
+                </ACard>
+            </div>
+        </>);
+    }
+    if (pageState === 'choose') {
+        return (<>
+        </>);
+    }
+    if (pageState === 'start') {
+        return (<>
+        </>);
+    }
+    if (pageState === 'edit') {
+        const convertIntoWordData = (text: string) => {
+            const t1 = text.split('\n').map(v => v.trim()).filter(v => v.includes(','));
+            const t2 = t1.map(v => {
+                const [left, right] = v.split(',', 2).map(v => v.trim());
+                if (left && right)
+                    return {
+                        [left]: right
+                    };
+                else return {};
+            });
+            const new_data = {
+                locale1: wordData.locale1,
+                locale2: wordData.locale2,
+                data: Object.assign({}, ...t2)
+            };
+            setWordData(new_data);
+        }
+        const convertFromWordData = () => {
+            let result = '';
+            for (const k in wordData.data) {
+                result += `${k}, ${wordData.data[k]}\n`;
+            }
+            return result;
+        }
+        let input = convertFromWordData();
+        const handleSave = () => {
+            convertIntoWordData(input);
+            setPageState('main');
+        }
+        const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+            input = e.target.value;
+        }
+        return (<>
+            <div className="w-full h-screen flex flex-col justify-center items-center">
+                <ACard className="">
+                    <textarea className="text-white border-gray-200 border rounded-2xl w-full h-50 resize-none outline-0 p-2"
+                        defaultValue={input}
+                        onChange={handleChange}></textarea>
+                    <div className="w-full flex items-center justify-center">
+                        <BCard className="flex gap-2 justify-center items-center w-fit">
+                            <Button>choose locale1</Button>
+                            <Button>choose locale2</Button>
+                            <Button onClick={() => setPageState('main')}>Cancel</Button>
+                            <Button onClick={handleSave}>Save</Button>
+                            <button className="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed data-[shape=pill]:rounded-full data-[width=full]:w-full focus:shadow-none text-sm rounded-md py-2 px-4 shadow-sm hover:shadow-md bg-slate-800 border-slate-800 text-slate-50 hover:bg-slate-700 hover:border-slate-700">
+                                Button
+                            </button>
+                        </BCard>
+                    </div>
+                    <div className="w-48">
+                    </div>
+                </ACard>
+            </div>
+
+            {/* <Select
+                            label="选择语言"
+                            placeholder="请选择语言"
+                            onResize={undefined}
+                            onResizeCapture={undefined}
+                            onPointerEnterCapture={undefined}
+                            onPointerLeaveCapture={undefined}
+                        >
+                            <Option>Material Tailwind HTML</Option>
+                            <Option>Material Tailwind React</Option>
+                            <Option>Material Tailwind Vue</Option>
+                            <Option>Material Tailwind Angular</Option>
+                            <Option>Material Tailwind Svelte</Option>
+                        </Select> */}
+        </>);
+    }
+}

src/app/text-speaker/page.tsx

@@ -287,13 +287,15 @@ export default function TextSpeaker() {
                     alt="save"
                     className={`${saving ? 'bg-gray-200' : ''}`}></IconClick>
                 <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
-                    <Button label="生成IPA"
+                    <Button
                         selected={ipaEnabled}
                         onClick={() => setIPAEnabled(!ipaEnabled)}>
+                        生成IPA
                     </Button>
-                    <Button label="查看保存项"
+                    <Button
                         onClick={() => { setShowSaveList(!showSaveList) }}
                         selected={showSaveList}>
+                        查看保存项
                     </Button>
                 </div>
             </div>

src/app/translator/page.tsx

@@ -206,7 +206,7 @@ export default function Translator() {
           </div>
           <div className="option1 w-full flex flex-row justify-between items-center">
             <span>detect language</span>
-            <Button label="generate ipa" selected={ipaEnabled} onClick={() => setIPAEnabled(!ipaEnabled)}></Button>
+            <Button selected={ipaEnabled} onClick={() => setIPAEnabled(!ipaEnabled)}>generate ipa</Button>
           </div>
         </div>
         <div className="card2 w-full md:w-1/2 flex flex-col-reverse gap-2">
@@ -227,10 +227,10 @@ export default function Translator() {
           </div>
           <div className="option2 w-full flex gap-1 items-center flex-wrap">
             <span>translate into</span>
-            <Button onClick={() => { setTargetLang('English') }} label="English" selected={targetLang === 'English'}></Button>
+            <Button onClick={() => { setTargetLang('English') }} selected={targetLang === 'English'}>English</Button>
-            <Button onClick={() => { setTargetLang('Italian') }} label="Italian" selected={targetLang === 'Italian'}></Button>
+            <Button onClick={() => { setTargetLang('Italian') }} selected={targetLang === 'Italian'}>Italian</Button>
-            <Button onClick={() => { setTargetLang('Japanese') }} label="Japanese" selected={targetLang === 'Japanese'}></Button>
+            <Button onClick={() => { setTargetLang('Japanese') }} selected={targetLang === 'Japanese'}>Japanese</Button>
-            <Button onClick={inputLanguage} label={'Other' + (tl.includes(targetLang) ? '' : ': ' + targetLang)} selected={!(tl.includes(targetLang))}></Button>
+            <Button onClick={inputLanguage} selected={!(tl.includes(targetLang))}>{'Other' + (tl.includes(targetLang) ? '' : ': ' + targetLang)}</Button>
           </div>
         </div>
       </div>

src/app/word-board/page.tsx

@@ -147,12 +147,12 @@ export default function WordBoard() {
           <TheBoard selectWord={selectWord} words={words as [Word]} setWords={setWords} />
           <div className="flex justify-center rounded mt-3 gap-1">
             <input ref={inputRef} placeholder="word to operate" type="text" className="focus:outline-none border-b-2 border-black" />
-            <Button label="插入" onClick={insertWord}></Button>
+            <Button onClick={insertWord}>插入</Button>
-            <Button label="删除" onClick={deleteWord}></Button>
+            <Button onClick={deleteWord}>删除</Button>
-            <Button label="搜索" onClick={searchWord}></Button>
+            <Button onClick={searchWord}>搜索</Button>
-            <Button label="导入" onClick={importWords}></Button>
+            <Button onClick={importWords}>导入</Button>
-            <Button label="导出" onClick={exportWords}></Button>
+            <Button onClick={exportWords}>导出</Button>
-            <Button label="删光" onClick={deleteAll}></Button>
+            <Button onClick={deleteAll}>删光</Button>
             {/* <Button label="朗读" onClick={readWordAloud}></Button> */}
           </div>
           <input type="file" ref={inputFileRef} className="hidden" accept="application/json" onChange={handleFileChange}></input>

src/components/Button.tsx

@@ -1,21 +1,20 @@
 export default function Button({
-  label,
   onClick,
-  className = '',
+  className,
-  selected = false
+  selected,
+  children
 }: {
-  label:
-  string,
   onClick?: () => void,
   className?: string,
-  selected?: boolean
+  selected?: boolean,
+  children?: React.ReactNode
 }) {
   return (
     <button
       onClick={onClick}
       className={`px-2 py-1 rounded shadow-2xs font-bold hover:bg-gray-300 hover:cursor-pointer ${selected ? 'bg-gray-300' : "bg-white"} ${className}`}
     >
-      {label}
+      {children}
     </button>
   );
 }

src/config/locales.ts

@@ -0,0 +1,144 @@
+const locales: string[] = [
+  "af-ZA",
+  "sq-AL",
+  "am-ET",
+  "ar-DZ",
+  "ar-BH",
+  "ar-EG",
+  "ar-IQ",
+  "ar-JO",
+  "ar-KW",
+  "ar-LB",
+  "ar-LY",
+  "ar-MA",
+  "ar-OM",
+  "ar-QA",
+  "ar-SA",
+  "ar-SY",
+  "ar-TN",
+  "ar-AE",
+  "ar-YE",
+  "az-AZ",
+  "bn-BD",
+  "bn-IN",
+  "bs-BA",
+  "bg-BG",
+  "my-MM",
+  "ca-ES",
+  "zh-HK",
+  "zh-CN",
+  "zh-CN-liaoning",
+  "zh-TW",
+  "zh-CN-shaanxi",
+  "hr-HR",
+  "cs-CZ",
+  "da-DK",
+  "nl-BE",
+  "nl-NL",
+  "en-AU",
+  "en-CA",
+  "en-HK",
+  "en-IN",
+  "en-IE",
+  "en-KE",
+  "en-NZ",
+  "en-NG",
+  "en-PH",
+  "en-SG",
+  "en-ZA",
+  "en-TZ",
+  "en-GB",
+  "en-US",
+  "et-EE",
+  "fil-PH",
+  "fi-FI",
+  "fr-BE",
+  "fr-CA",
+  "fr-FR",
+  "fr-CH",
+  "gl-ES",
+  "ka-GE",
+  "de-AT",
+  "de-DE",
+  "de-CH",
+  "el-GR",
+  "gu-IN",
+  "he-IL",
+  "hi-IN",
+  "hu-HU",
+  "is-IS",
+  "id-ID",
+  "ga-IE",
+  "it-IT",
+  "ja-JP",
+  "jv-ID",
+  "kn-IN",
+  "kk-KZ",
+  "km-KH",
+  "ko-KR",
+  "lo-LA",
+  "lv-LV",
+  "lt-LT",
+  "mk-MK",
+  "ms-MY",
+  "ml-IN",
+  "mt-MT",
+  "mr-IN",
+  "mn-MN",
+  "ne-NP",
+  "nb-NO",
+  "ps-AF",
+  "fa-IR",
+  "pl-PL",
+  "pt-BR",
+  "pt-PT",
+  "ro-RO",
+  "ru-RU",
+  "sr-RS",
+  "si-LK",
+  "sk-SK",
+  "sl-SI",
+  "so-SO",
+  "es-AR",
+  "es-BO",
+  "es-CL",
+  "es-CO",
+  "es-CR",
+  "es-CU",
+  "es-DO",
+  "es-EC",
+  "es-SV",
+  "es-GQ",
+  "es-GT",
+  "es-HN",
+  "es-MX",
+  "es-NI",
+  "es-PA",
+  "es-PY",
+  "es-PE",
+  "es-PR",
+  "es-ES",
+  "es-US",
+  "es-UY",
+  "es-VE",
+  "su-ID",
+  "sw-KE",
+  "sw-TZ",
+  "sv-SE",
+  "ta-IN",
+  "ta-MY",
+  "ta-SG",
+  "ta-LK",
+  "te-IN",
+  "th-TH",
+  "tr-TR",
+  "uk-UA",
+  "ur-IN",
+  "ur-PK",
+  "uz-UZ",
+  "vi-VN",
+  "cy-GB",
+  "zu-ZA"
+];
+
+export default locales;