learnのkeyboardとreadにtailwind cssを適用

learn/src/components/AlphabetTableDialog.tsx

@@ -2,13 +2,13 @@ import { useState } from "react";
 import {
   Typography,
   Box,
-  Button,
   Table,
   TableRow,
   TableCell,
   Paper,
 } from "@mui/material";
 import { alphabetTable } from "@/utils/translateBraille";
+import CommonButton from "./CommonButton";
 
 export default function AlphabetTableDialog(): JSX.Element {
   const [isAlphabetTableOpen, setIsAlphabetTableOpen] =
@@ -17,15 +17,14 @@ export default function AlphabetTableDialog(): JSX.Element {
     <Box paddingTop={2}>
       {isAlphabetTableOpen ? (
         <>
-          <Button
-            color="inherit"
+          <CommonButton
             variant="outlined"
             onClick={() => {
               setIsAlphabetTableOpen(false);
             }}
           >
             点字⇔アルファベット表を閉じる
-          </Button>
+          </CommonButton>
           <Box paddingTop={2}>
             <Paper elevation={2} sx={{ my: 2 }}>
               <Typography variant="h6" component="h2" color="inherit" p={2}>
@@ -97,15 +96,14 @@ export default function AlphabetTableDialog(): JSX.Element {
           </Box>
         </>
       ) : (
-        <Button
-          color="inherit"
+        <CommonButton
           variant="outlined"
           onClick={() => {
             setIsAlphabetTableOpen(true);
           }}
         >
           点字⇔アルファベット表を確認する
-        </Button>
+        </CommonButton>
       )}
     </Box>
   );

learn/src/components/BottomStepper.tsx

@@ -1,6 +1,7 @@
 import { type Dispatch, type SetStateAction } from "react";
 import { useRouter } from "next/router";
-import { BottomNavigation, Button, MobileStepper } from "@mui/material";
+import { BottomNavigation, MobileStepper } from "@mui/material";
+import CommonButton from "./CommonButton";
 
 export default function BottomStepper({
   selectedStep,
@@ -20,8 +21,7 @@ export default function BottomStepper({
         position="bottom"
         activeStep={selectedStep}
         backButton={
-          <Button
-            variant="contained"
+          <CommonButton
             disabled={selectedStep === 0}
             onClick={() => {
               if (selectedStep > 0) {
@@ -30,12 +30,11 @@ export default function BottomStepper({
             }}
           >
             前へ
-          </Button>
+          </CommonButton>
         }
         nextButton={
           selectedStep !== length - 1 ? (
-            <Button
-              variant="contained"
+            <CommonButton
               disabled={selectedStep === length - 1}
               onClick={() => {
                 if (selectedStep < length - 1) {
@@ -44,16 +43,16 @@ export default function BottomStepper({
               }}
             >
               次へ
-            </Button>
+            </CommonButton>
           ) : (
-            <Button
+            <CommonButton
               variant="contained"
               onClick={async () => {
                 await router.push("/");
               }}
             >
               終了
-            </Button>
+            </CommonButton>
           )
         }
       />

learn/src/components/CommonButton.tsx

@@ -0,0 +1,44 @@
+import { MouseEventHandler } from "react";
+
+type CommonButtonProps = {
+  disabled?: boolean | undefined;
+  onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+  variant?: "outlined" | "contained";
+  children: React.ReactNode;
+};
+
+function CommonButton(props: CommonButtonProps) {
+  const { disabled, onClick, variant, children } = props;
+  const baseClassName =
+    "mb-1 rounded border px-4 py-2 text-center font-medium ";
+  let className = baseClassName;
+
+  if (disabled) {
+    if (variant === "contained") {
+      className += "text-white bg-blue-300 dark:bg-white dark:text-blue-300";
+    } else {
+      className +=
+        "border-blue-300 text-blue-300 dark:border-blue-300 dark:text-blue-300";
+    }
+  } else if (!disabled) {
+    if (variant === "contained") {
+      className += "text-white bg-blue-500 hover:text-blue-500 hover:bg-white";
+    } else {
+      className +=
+        "border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300";
+    }
+  }
+
+  return (
+    <button
+      className={className}
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default CommonButton;

learn/src/components/HiraganaTableDialog.tsx

@@ -2,14 +2,14 @@ import { useState } from "react";
 import {
   Typography,
   Box,
-  Button,
   Table,
   TableHead,
   TableRow,
   TableCell,
   Paper,
 } from "@mui/material";
 import { hiraganaTable } from "@/utils/translateBraille";
+import CommonButton from "./CommonButton";
 
 export default function HiraganaTableDialog(): JSX.Element {
   const [isHiraganaTableOpen, setIsHiraganaTableOpen] =
@@ -18,15 +18,14 @@ export default function HiraganaTableDialog(): JSX.Element {
     <Box paddingTop={2}>
       {isHiraganaTableOpen ? (
         <>
-          <Button
-            color="inherit"
+          <CommonButton
             variant="outlined"
             onClick={() => {
               setIsHiraganaTableOpen(false);
             }}
           >
             点字⇔ひらがな表を閉じる
-          </Button>
+          </CommonButton>
           <Box paddingTop={2}>
             <Paper elevation={2} sx={{ my: 2 }}>
               <Typography variant="h6" component="h2" color="inherit" p={2}>
@@ -208,15 +207,14 @@ export default function HiraganaTableDialog(): JSX.Element {
           </Box>
         </>
       ) : (
-        <Button
-          color="inherit"
+        <CommonButton
           variant="outlined"
           onClick={() => {
             setIsHiraganaTableOpen(true);
           }}
         >
           点字⇔ひらがな表を確認する
-        </Button>
+        </CommonButton>
       )}
     </Box>
   );

learn/src/components/PracticeField.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import useTypedBrailleString from "@/hooks/useTypedBrailleString";
 import translateBraille from "@/utils/translateBraille";
-import { TextField, Typography, Box, Button } from "@mui/material";
+import { TextField, Typography, Box } from "@mui/material";
 import { BrailleArray } from "@dot-tutor/braille";
+import CommonButton from "./CommonButton";
 
 export default function PracticeField({
   question,
@@ -42,7 +43,7 @@ export default function PracticeField({
         </Typography>
       </Box>
       <Box m={1}>
-        <Button
+        <CommonButton
           variant="outlined"
           onClick={() => {
             setCorrectOrNot(false);
@@ -53,7 +54,7 @@ export default function PracticeField({
           }}
         >
           答え合わせをする
-        </Button>
+        </CommonButton>
       </Box>
       <Box m={1}>
         {answered

learn/src/components/TenjiInput.tsx

@@ -18,6 +18,7 @@ export default function TenjiInput(props: {
   const oncePressedKeysRef = useRef(new Set<string>());
   return (
     <input
+      className="border-2 border-solid"
       ref={inputRef}
       onChange={(e) =>
         setValue((e.target.value.match(/[⠀-⣿]/g) ?? [""]).join(""))

learn/src/components/TopBar.tsx

@@ -8,12 +8,12 @@ import {
   Toolbar,
   Stack,
   Typography,
-  Button,
   Link,
   IconButton,
 } from "@mui/material";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import { type TutorialDialogSteps } from "../types/Tutorial";
+import CommonButton from "./CommonButton";
 
 export default function TopBar({
   tutorialDialogSteps,
@@ -58,15 +58,14 @@ export default function TopBar({
           <Stack direction="row" spacing={2} alignItems="center">
             {tutorialDialogSteps !== undefined && (
               <>
-                <Button
-                  color="inherit"
-                  variant="outlined"
+                <CommonButton
+                  variant="contained"
                   onClick={() => {
                     setIsTutorialOpen(true);
                   }}
                 >
                   スライドで確認
-                </Button>
+                </CommonButton>
                 <TutorialDialog
                   open={isTutorialOpen}
                   setOpen={setIsTutorialOpen}

learn/src/components/TutorialDialog.tsx

@@ -7,9 +7,9 @@ import {
   DialogActions,
   Typography,
   IconButton,
-  Button,
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import CommonButton from "./CommonButton";
 
 export default function TutorialDialog({
   open,
@@ -62,7 +62,7 @@ export default function TutorialDialog({
         {tutorialDialogSteps[selectedStep].content}
       </DialogContent>
       <DialogActions>
-        <Button
+        <CommonButton
           variant="outlined"
           disabled={selectedStep === 0}
           onClick={() => {
@@ -72,8 +72,8 @@ export default function TutorialDialog({
           }}
         >
           前へ
-        </Button>
-        <Button
+        </CommonButton>
+        <CommonButton
           variant="outlined"
           disabled={selectedStep === tutorialDialogSteps.length - 1}
           onClick={() => {
@@ -83,16 +83,16 @@ export default function TutorialDialog({
           }}
         >
           次へ
-        </Button>
+        </CommonButton>
         {selectedStep === tutorialDialogSteps.length - 1 && (
-          <Button
+          <CommonButton
             variant="contained"
             onClick={() => {
               closeDialog();
             }}
           >
             はじめる
-          </Button>
+          </CommonButton>
         )}
       </DialogActions>
     </Dialog>