From 0f1025334a6ca1439bc06983e7f9923808c66916 Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Wed, 23 Nov 2022 15:31:27 +0900
Subject: [PATCH 1/7] introduce MUI

---
 package-lock.json | 785 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   3 +
 2 files changed, 774 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 43aa7c247..f456e23fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,10 @@
       "dependencies": {
         "@docusaurus/core": "^2.2.0",
         "@docusaurus/preset-classic": "^2.2.0",
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
         "@mdx-js/react": "^1.6.22",
+        "@mui/material": "^5.10.15",
         "clsx": "^1.2.1",
         "hast-util-is-element": "^1.1.0",
         "prism-react-renderer": "^1.3.5",
@@ -1897,11 +1900,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
+      "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.10"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2697,6 +2700,159 @@
         "node": ">=16.14"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.17.12",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
+      "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
@@ -3035,6 +3191,237 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-alpha.107",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.107.tgz",
+      "integrity": "sha512-HX/BD8CSe+Y/dpbZ5aKJScJhKQ/Hw6du2yd68Upv2cO67bwixyZ64h3aNcdDu7RQzI7nrZQm0JykffP1Orgq0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@mui/types": "^7.2.1",
+        "@mui/utils": "^5.10.15",
+        "@popperjs/core": "^2.11.6",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.15.tgz",
+      "integrity": "sha512-xFcS0LpdF0Q1qJrrNsYUv9PU+ovvhCEPTOMw2jcpEFtl3CA87dLpvztORR5oE2UBFjWF7qLQLOwboQU1+xC7Cw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.15.tgz",
+      "integrity": "sha512-OqoHfUtVMppFHgk2M95j+pR8MWfLKhzSdz4aKEfIpFrHIHbYang+oY7Iy/exX+vqpZSEGHgHQ0cGX0hGTGx9cg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1",
+        "@mui/base": "5.0.0-alpha.107",
+        "@mui/core-downloads-tracker": "^5.10.15",
+        "@mui/system": "^5.10.15",
+        "@mui/types": "^7.2.1",
+        "@mui/utils": "^5.10.15",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.15.tgz",
+      "integrity": "sha512-l7CsUj5kYdYz118/JHSvZZTYE9WnIWwln0td5jYATnYw9cNX4ygD6AkKOUYZ1Jitp1YLJqcO8jCP9E5/Nql9IQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1",
+        "@mui/utils": "^5.10.15",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.10.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.14.tgz",
+      "integrity": "sha512-bgKdM57ExogWpIfhL/ngSlzF4FhbH00vYF+Y5VALTob4uslFqje0xzoWmbfcCn4cZt2NXxZJIwhsq4vzo5itlw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1",
+        "@emotion/cache": "^11.10.5",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.15.tgz",
+      "integrity": "sha512-WZmgmpYTMXAaD++QetaaM/miwhNh1JJY1dH7MJH/3Fuv3r3gnhfzE6A55lDqWxkQmlWUO2DCn/cnNZ0FkSdZUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1",
+        "@mui/private-theming": "^5.10.15",
+        "@mui/styled-engine": "^5.10.14",
+        "@mui/types": "^7.2.1",
+        "@mui/utils": "^5.10.15",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.1.tgz",
+      "integrity": "sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.15.tgz",
+      "integrity": "sha512-6AW4MLBUijJi31hxx+6utTJM2q/4hbO+QiMdtwM+f4Iy+BfFnh/elhb08apxNYLfuugPnXXpkDmzEjg+8uDU9g==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3072,6 +3459,15 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -3571,6 +3967,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-router": {
       "version": "5.1.19",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
@@ -3600,6 +4004,14 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -4446,6 +4858,20 @@
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
       "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -5923,6 +6349,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -7016,6 +7451,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -11395,6 +11835,21 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -11496,9 +11951,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -12888,6 +13343,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -15854,11 +16314,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
-      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "version": "7.20.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
+      "integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.13.10"
       }
     },
     "@babel/runtime-corejs3": {
@@ -16475,6 +16935,128 @@
         "tslib": "^2.4.0"
       }
     },
+    "@emotion/babel-plugin": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.17.12",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+      "requires": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "requires": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "@emotion/react": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "requires": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+    },
+    "@emotion/styled": {
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
+      "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
@@ -16739,6 +17321,120 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
       "integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA=="
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.107",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.107.tgz",
+      "integrity": "sha512-HX/BD8CSe+Y/dpbZ5aKJScJhKQ/Hw6du2yd68Upv2cO67bwixyZ64h3aNcdDu7RQzI7nrZQm0JykffP1Orgq0g==",
+      "requires": {
+        "@babel/runtime": "^7.20.1",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@mui/types": "^7.2.1",
+        "@mui/utils": "^5.10.15",
+        "@popperjs/core": "^2.11.6",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/core-downloads-tracker": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.15.tgz",
+      "integrity": "sha512-xFcS0LpdF0Q1qJrrNsYUv9PU+ovvhCEPTOMw2jcpEFtl3CA87dLpvztORR5oE2UBFjWF7qLQLOwboQU1+xC7Cw=="
+    },
+    "@mui/material": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.15.tgz",
+      "integrity": "sha512-OqoHfUtVMppFHgk2M95j+pR8MWfLKhzSdz4aKEfIpFrHIHbYang+oY7Iy/exX+vqpZSEGHgHQ0cGX0hGTGx9cg==",
+      "requires": {
+        "@babel/runtime": "^7.20.1",
+        "@mui/base": "5.0.0-alpha.107",
+        "@mui/core-downloads-tracker": "^5.10.15",
+        "@mui/system": "^5.10.15",
+        "@mui/types": "^7.2.1",
+        "@mui/utils": "^5.10.15",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.15.tgz",
+      "integrity": "sha512-l7CsUj5kYdYz118/JHSvZZTYE9WnIWwln0td5jYATnYw9cNX4ygD6AkKOUYZ1Jitp1YLJqcO8jCP9E5/Nql9IQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.1",
+        "@mui/utils": "^5.10.15",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.10.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.14.tgz",
+      "integrity": "sha512-bgKdM57ExogWpIfhL/ngSlzF4FhbH00vYF+Y5VALTob4uslFqje0xzoWmbfcCn4cZt2NXxZJIwhsq4vzo5itlw==",
+      "requires": {
+        "@babel/runtime": "^7.20.1",
+        "@emotion/cache": "^11.10.5",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.15.tgz",
+      "integrity": "sha512-WZmgmpYTMXAaD++QetaaM/miwhNh1JJY1dH7MJH/3Fuv3r3gnhfzE6A55lDqWxkQmlWUO2DCn/cnNZ0FkSdZUg==",
+      "requires": {
+        "@babel/runtime": "^7.20.1",
+        "@mui/private-theming": "^5.10.15",
+        "@mui/styled-engine": "^5.10.14",
+        "@mui/types": "^7.2.1",
+        "@mui/utils": "^5.10.15",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.1",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.1.tgz",
+      "integrity": "sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.15.tgz",
+      "integrity": "sha512-6AW4MLBUijJi31hxx+6utTJM2q/4hbO+QiMdtwM+f4Iy+BfFnh/elhb08apxNYLfuugPnXXpkDmzEjg+8uDU9g==",
+      "requires": {
+        "@babel/runtime": "^7.20.1",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -16767,6 +17463,11 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g=="
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -17131,6 +17832,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-router": {
       "version": "5.1.19",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.19.tgz",
@@ -17160,6 +17869,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -17798,6 +18515,16 @@
         }
       }
     },
+    "babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -18840,6 +19567,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -19656,6 +20392,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -22722,6 +23463,17 @@
         "use-latest": "^1.2.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -22802,9 +23554,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -23860,6 +24612,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index b0ccd305d..a65fb2bb7 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,10 @@
   "dependencies": {
     "@docusaurus/core": "^2.2.0",
     "@docusaurus/preset-classic": "^2.2.0",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^1.6.22",
+    "@mui/material": "^5.10.15",
     "clsx": "^1.2.1",
     "hast-util-is-element": "^1.1.0",
     "prism-react-renderer": "^1.3.5",

From bc3a64415191ad253fac92cc88f322860784a4ef Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Wed, 23 Nov 2022 18:44:21 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=E5=A4=A7=E3=81=8D=E3=81=95=E3=82=92?=
 =?UTF-8?q?=E5=A4=89=E3=81=88=E3=82=8B=E6=A9=9F=E8=83=BD=E3=81=BE=E3=81=A7?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/02advanced/02/index.mdx |  11 ++++
 src/components/LifeGame.tsx  | 123 +++++++++++++++++++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 docs/02advanced/02/index.mdx
 create mode 100644 src/components/LifeGame.tsx

diff --git a/docs/02advanced/02/index.mdx b/docs/02advanced/02/index.mdx
new file mode 100644
index 000000000..4540cdfc9
--- /dev/null
+++ b/docs/02advanced/02/index.mdx
@@ -0,0 +1,11 @@
+---
+sidebar_position: 2
+---
+
+import ViewSource from "@site/src/components/ViewSource/ViewSource";
+import Answer from "@site/src/components/Answer";
+import LifeGame from "@site/src/components/LifeGame";
+
+# ライフゲーム
+
+<LifeGame />
diff --git a/src/components/LifeGame.tsx b/src/components/LifeGame.tsx
new file mode 100644
index 000000000..28f21fd64
--- /dev/null
+++ b/src/components/LifeGame.tsx
@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Box, Slider, Typography } from "@mui/material";
+
+function chooseCells(board, iStart, iEnd, jStart, jEnd) {
+  return board
+    .filter((row, i) => iStart <= i && i < iEnd)
+    .map((column) => column.filter((cell, j) => 0 <= jStart && j < jEnd));
+}
+
+export default function LifeGame() {
+  // useEffect(() => {
+  //     setInterval(lifeGame, 1000)
+  // }, []);
+  const [size, setSize] = useState<number>(10);
+  const [velocity, setVelocity] = useState<number>(1);
+  const [board, setBoard] = useState<boolean[][]>(
+    Array(100)
+      .fill()
+      .map(() => Array(100).fill(false)),
+  );
+  return (
+    <>
+      <Grid container direction="row" spacing={2}>
+        <Grid item>
+          <Typography gutterBottom>大きさ</Typography>
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={size}
+            onChange={(e) => {
+              setSize(e.target.value);
+            }}
+            min={1}
+            step={1}
+            max={100}
+            valueLabelDisplay="auto"
+          />
+        </Grid>
+        <Grid item>
+          <Typography gutterBottom>速さ</Typography>
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={velocity}
+            onChange={(e) => {
+              setVelocity(e.target.value);
+            }}
+            min={1}
+            step={1}
+            max={100}
+            valueLabelDisplay="auto"
+          />
+        </Grid>
+      </Grid>
+      <ShowCells
+        board={board}
+        setBoard={setBoard}
+        iStart={0}
+        iEnd={size}
+        jStart={0}
+        jEnd={size}
+      ></ShowCells>
+    </>
+  );
+}
+
+export function ShowCells({
+  board,
+  setBoard,
+  iStart,
+  iEnd,
+  jStart,
+  jEnd,
+}: {
+  board: boolean[][];
+  setBoard: (board: boolean[][]) => boolean[][];
+  iStart: number;
+  iEnd: number;
+  jStart: number;
+  jEnd: number;
+}) {
+  const width = (iEnd - iStart) * 52 + 2;
+  const height = (jEnd - jStart) * 52 + 2;
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox={`0 0 ${width} ${height}`}
+      >
+        <defs />
+        <g>
+          <rect
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            fill="#808080"
+            pointerEvents="all"
+          />
+          {chooseCells(board, iStart, iEnd, jStart, jEnd).map((row, i) =>
+            row.map((cell, j) => (
+              <rect
+                key={`${i},${j}`}
+                x={j * 52 + 2}
+                y={i * 52 + 2}
+                width="50"
+                height="50"
+                fill={cell ? "#000000" : "#ffffff"}
+                pointerEvents="all"
+                onClick={() => {
+                  const tmp = [...board];
+                  tmp[i + iStart][j + jStart] = !board[i + iStart][j + jStart];
+                  setBoard(tmp);
+                }}
+              />
+            )),
+          )}
+        </g>
+      </svg>
+    </>
+  );
+}

From c4c7e375ba2915a750668a7fd1c3513fe3722e48 Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Wed, 23 Nov 2022 19:13:14 +0900
Subject: [PATCH 3/7] introduce react-zoom-pan-pinch

---
 package-lock.json | 20 ++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 21 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index f456e23fe..642a81770 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-jupyter-notebook": "^0.4.0",
+        "react-zoom-pan-pinch": "^2.1.3",
         "rehype-katex": "^5.0.0",
         "remark-math": "^3.0.1"
       },
@@ -11850,6 +11851,19 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-zoom-pan-pinch": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.1.3.tgz",
+      "integrity": "sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -23474,6 +23488,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-zoom-pan-pinch": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.1.3.tgz",
+      "integrity": "sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==",
+      "requires": {}
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
diff --git a/package.json b/package.json
index a65fb2bb7..2d79184e3 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-jupyter-notebook": "^0.4.0",
+    "react-zoom-pan-pinch": "^2.1.3",
     "rehype-katex": "^5.0.0",
     "remark-math": "^3.0.1"
   },

From 9798eb5ff29087bf8ec6c6d6e9379f915b380a5e Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Wed, 23 Nov 2022 21:16:05 +0900
Subject: [PATCH 4/7] introduce material-icons

---
 package-lock.json | 34 ++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 35 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 642a81770..8e65221d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
         "@mdx-js/react": "^1.6.22",
+        "@mui/icons-material": "^5.10.15",
         "@mui/material": "^5.10.15",
         "clsx": "^1.2.1",
         "hast-util-is-element": "^1.1.0",
@@ -3238,6 +3239,31 @@
         "url": "https://opencollective.com/mui"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.10.15.tgz",
+      "integrity": "sha512-fXkz7CtYTt4AH4YYT67VFhM/A3YCUqZGGLp/3BlzRPQRNEfFKknw3MgG1S5UYrY5weti8jxMx3mwwfhVP8OMhQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.10.15",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.15.tgz",
@@ -17362,6 +17388,14 @@
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.15.tgz",
       "integrity": "sha512-xFcS0LpdF0Q1qJrrNsYUv9PU+ovvhCEPTOMw2jcpEFtl3CA87dLpvztORR5oE2UBFjWF7qLQLOwboQU1+xC7Cw=="
     },
+    "@mui/icons-material": {
+      "version": "5.10.15",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.10.15.tgz",
+      "integrity": "sha512-fXkz7CtYTt4AH4YYT67VFhM/A3YCUqZGGLp/3BlzRPQRNEfFKknw3MgG1S5UYrY5weti8jxMx3mwwfhVP8OMhQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.1"
+      }
+    },
     "@mui/material": {
       "version": "5.10.15",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.15.tgz",
diff --git a/package.json b/package.json
index 2d79184e3..76e4dde43 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mdx-js/react": "^1.6.22",
+    "@mui/icons-material": "^5.10.15",
     "@mui/material": "^5.10.15",
     "clsx": "^1.2.1",
     "hast-util-is-element": "^1.1.0",

From e02cff7913a8d4fe6d6ad0fdd7ba4eaa01dec658 Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Wed, 23 Nov 2022 23:49:19 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=E3=83=A9=E3=82=A4=E3=83=95=E3=82=B2?=
 =?UTF-8?q?=E3=83=BC=E3=83=A0=E3=81=AE=E3=83=97=E3=83=AD=E3=82=B0=E3=83=A9?=
 =?UTF-8?q?=E3=83=A0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/02advanced/01life-game/index.mdx     |   7 ++
 docs/02advanced/02/index.mdx              |  11 --
 src/components/LifeGame.tsx               | 123 -------------------
 src/components/LifeGame/LifeGame.tsx      | 137 ++++++++++++++++++++++
 src/components/LifeGame/nextGeneration.ts |  29 +++++
 5 files changed, 173 insertions(+), 134 deletions(-)
 delete mode 100644 docs/02advanced/02/index.mdx
 delete mode 100644 src/components/LifeGame.tsx
 create mode 100644 src/components/LifeGame/LifeGame.tsx
 create mode 100644 src/components/LifeGame/nextGeneration.ts

diff --git a/docs/02advanced/01life-game/index.mdx b/docs/02advanced/01life-game/index.mdx
index b545e4ed5..7eba32fa8 100644
--- a/docs/02advanced/01life-game/index.mdx
+++ b/docs/02advanced/01life-game/index.mdx
@@ -4,6 +4,7 @@ sidebar_position: 1
 
 import ViewSource from "@site/src/components/ViewSource/ViewSource";
 import Answer from "@site/src/components/Answer";
+import LifeGame from "@site/src/components/LifeGame/LifeGame";
 
 # ライフゲーム
 
@@ -77,6 +78,12 @@ import Answer from "@site/src/components/Answer";
 
 ![overpopulation5](./overpopulation5.drawio.svg)
 
+## ライフゲームで遊んでみる
+
+ライフゲームを簡単に遊べるプログラムを作ってみました。下のマスをクリックすると、マスの色を反転することができます。これで少し遊ぶことでライフゲームの仕組みを理解してください。
+
+<LifeGame />
+
 ## ライフゲームのプログラム
 
 早速、ライフゲームの Python でのプログラムを見てみましょう。この後、詳しく解説するので、分からなくても構いません。`Open in Colab` と書いてあるボタンを押してから実行して、実際に動く様子を確認してみてください。
diff --git a/docs/02advanced/02/index.mdx b/docs/02advanced/02/index.mdx
deleted file mode 100644
index 4540cdfc9..000000000
--- a/docs/02advanced/02/index.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
----
-sidebar_position: 2
----
-
-import ViewSource from "@site/src/components/ViewSource/ViewSource";
-import Answer from "@site/src/components/Answer";
-import LifeGame from "@site/src/components/LifeGame";
-
-# ライフゲーム
-
-<LifeGame />
diff --git a/src/components/LifeGame.tsx b/src/components/LifeGame.tsx
deleted file mode 100644
index 28f21fd64..000000000
--- a/src/components/LifeGame.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Grid, Box, Slider, Typography } from "@mui/material";
-
-function chooseCells(board, iStart, iEnd, jStart, jEnd) {
-  return board
-    .filter((row, i) => iStart <= i && i < iEnd)
-    .map((column) => column.filter((cell, j) => 0 <= jStart && j < jEnd));
-}
-
-export default function LifeGame() {
-  // useEffect(() => {
-  //     setInterval(lifeGame, 1000)
-  // }, []);
-  const [size, setSize] = useState<number>(10);
-  const [velocity, setVelocity] = useState<number>(1);
-  const [board, setBoard] = useState<boolean[][]>(
-    Array(100)
-      .fill()
-      .map(() => Array(100).fill(false)),
-  );
-  return (
-    <>
-      <Grid container direction="row" spacing={2}>
-        <Grid item>
-          <Typography gutterBottom>大きさ</Typography>
-        </Grid>
-        <Grid item xs>
-          <Slider
-            value={size}
-            onChange={(e) => {
-              setSize(e.target.value);
-            }}
-            min={1}
-            step={1}
-            max={100}
-            valueLabelDisplay="auto"
-          />
-        </Grid>
-        <Grid item>
-          <Typography gutterBottom>速さ</Typography>
-        </Grid>
-        <Grid item xs>
-          <Slider
-            value={velocity}
-            onChange={(e) => {
-              setVelocity(e.target.value);
-            }}
-            min={1}
-            step={1}
-            max={100}
-            valueLabelDisplay="auto"
-          />
-        </Grid>
-      </Grid>
-      <ShowCells
-        board={board}
-        setBoard={setBoard}
-        iStart={0}
-        iEnd={size}
-        jStart={0}
-        jEnd={size}
-      ></ShowCells>
-    </>
-  );
-}
-
-export function ShowCells({
-  board,
-  setBoard,
-  iStart,
-  iEnd,
-  jStart,
-  jEnd,
-}: {
-  board: boolean[][];
-  setBoard: (board: boolean[][]) => boolean[][];
-  iStart: number;
-  iEnd: number;
-  jStart: number;
-  jEnd: number;
-}) {
-  const width = (iEnd - iStart) * 52 + 2;
-  const height = (jEnd - jStart) * 52 + 2;
-  return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        viewBox={`0 0 ${width} ${height}`}
-      >
-        <defs />
-        <g>
-          <rect
-            x="0"
-            y="0"
-            width={width}
-            height={height}
-            fill="#808080"
-            pointerEvents="all"
-          />
-          {chooseCells(board, iStart, iEnd, jStart, jEnd).map((row, i) =>
-            row.map((cell, j) => (
-              <rect
-                key={`${i},${j}`}
-                x={j * 52 + 2}
-                y={i * 52 + 2}
-                width="50"
-                height="50"
-                fill={cell ? "#000000" : "#ffffff"}
-                pointerEvents="all"
-                onClick={() => {
-                  const tmp = [...board];
-                  tmp[i + iStart][j + jStart] = !board[i + iStart][j + jStart];
-                  setBoard(tmp);
-                }}
-              />
-            )),
-          )}
-        </g>
-      </svg>
-    </>
-  );
-}
diff --git a/src/components/LifeGame/LifeGame.tsx b/src/components/LifeGame/LifeGame.tsx
new file mode 100644
index 000000000..ec7027a62
--- /dev/null
+++ b/src/components/LifeGame/LifeGame.tsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import { Grid, Slider, Typography, IconButton } from "@mui/material";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import AutorenewIcon from "@mui/icons-material/Autorenew";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
+import StopCircleIcon from "@mui/icons-material/StopCircle";
+import nextGeneration from "./nextGeneration";
+
+export default function LifeGame({
+  data = Array(100)
+    .fill()
+    .map(() => Array(100).fill(false)),
+}: {
+  data?: boolean[][];
+}) {
+  const [board, setBoard] = useState<boolean[][]>(data);
+  const [velocity, setVelocity] = useState<number>(4);
+  const [play, setPlay] = useState<boolean>(false);
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      play && setBoard(nextGeneration(board));
+    }, 4000 / velocity);
+    return () => {
+      clearInterval(timerId);
+    };
+  }, [play, board]);
+  return (
+    <>
+      <TransformWrapper initialScale={7}>
+        {({ zoomIn, zoomOut, resetTransform }) => (
+          <>
+            <IconButton
+              onClick={() => {
+                zoomIn();
+              }}
+            >
+              <ZoomInIcon />
+            </IconButton>
+            <IconButton
+              onClick={() => {
+                zoomOut();
+              }}
+            >
+              <ZoomOutIcon />
+            </IconButton>
+            <IconButton
+              onClick={() => {
+                resetTransform();
+              }}
+            >
+              <AutorenewIcon />
+            </IconButton>
+            <TransformComponent>
+              <ShowCells board={board} setBoard={setBoard}></ShowCells>
+            </TransformComponent>
+          </>
+        )}
+      </TransformWrapper>
+      <Grid container direction="row" spacing={2} alignItems="center">
+        <Grid item>
+          <IconButton
+            onClick={() => {
+              setPlay(!play);
+            }}
+          >
+            {play ? <StopCircleIcon /> : <PlayCircleFilledIcon />}
+          </IconButton>
+        </Grid>
+        <Grid item>
+          <IconButton
+            onClick={() => {
+              setBoard(data);
+            }}
+          >
+            <RefreshIcon />
+          </IconButton>
+        </Grid>
+        <Grid item>
+          <Typography gutterBottom>速さ</Typography>
+        </Grid>
+        <Grid item xs>
+          <Slider
+            value={velocity}
+            onChange={(e) => {
+              setVelocity(e.target.value);
+            }}
+            min={1}
+            step={1}
+            max={100}
+            valueLabelDisplay="auto"
+          />
+        </Grid>
+      </Grid>
+    </>
+  );
+}
+
+export function ShowCells({
+  board,
+  setBoard,
+}: {
+  board: boolean[][];
+  setBoard?: (board: boolean[][]) => void;
+}) {
+  const width = board.length * 52 + 2;
+  const height = board[0].length * 52 + 2;
+  return (
+    <>
+      <svg width="100%" height="100%" viewBox={`0 0 ${width} ${height}`}>
+        <defs />
+        <g>
+          <rect x="0" y="0" width={width} height={height} fill="#808080" />
+          {board.map((row, i) =>
+            row.map((cell, j) => (
+              <rect
+                key={`${i},${j}`}
+                x={j * 52 + 2}
+                y={i * 52 + 2}
+                width="50"
+                height="50"
+                fill={cell ? "#000000" : "#ffffff"}
+                onClick={() => {
+                  const tmp = [...board];
+                  tmp[i][j] = !board[i][j];
+                  setBoard(tmp);
+                }}
+              />
+            )),
+          )}
+        </g>
+      </svg>
+    </>
+  );
+}
diff --git a/src/components/LifeGame/nextGeneration.ts b/src/components/LifeGame/nextGeneration.ts
new file mode 100644
index 000000000..12b9e410b
--- /dev/null
+++ b/src/components/LifeGame/nextGeneration.ts
@@ -0,0 +1,29 @@
+function countNeighbors(board: boolean[][], i: number, j: number): number {
+  let cnt = 0;
+  for (let k = i - 1; k <= i + 1; k++) {
+    for (let l = j - 1; l <= j + 1; l++) {
+      if (0 <= k && k < board.length && 0 <= l && l < board[0].length)
+        cnt += Number(board[k][l]);
+    }
+  }
+  return cnt - Number(board[i][j]);
+}
+
+function isAlive(board: boolean[][], i: number, j: number): boolean {
+  const neighborsCnt = countNeighbors(board, i, j);
+  if (board[i][j]) {
+    return neighborsCnt === 2 || neighborsCnt === 3;
+  } else {
+    return neighborsCnt === 3;
+  }
+}
+
+export default function nextGeneration(board: boolean[][]): boolean[][] {
+  const nextBoard = board.map((row) => row.map((cell) => cell));
+  for (let i = 0; i < board.length; i++) {
+    for (let j = 0; j < board[0].length; j++) {
+      nextBoard[i][j] = isAlive(board, i, j);
+    }
+  }
+  return nextBoard;
+}

From 3417082d1d016e128f193c85e1ad6de0b7d67fbc Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Wed, 23 Nov 2022 14:50:38 +0000
Subject: [PATCH 6/7] Prettified Code!

---
 src/components/LifeGame/LifeGame.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LifeGame/LifeGame.tsx b/src/components/LifeGame/LifeGame.tsx
index ec7027a62..44ca666ab 100644
--- a/src/components/LifeGame/LifeGame.tsx
+++ b/src/components/LifeGame/LifeGame.tsx
@@ -128,7 +128,7 @@ export function ShowCells({
                   setBoard(tmp);
                 }}
               />
-            )),
+            ))
           )}
         </g>
       </svg>

From c690cd1c9feef26ba11c07f000be98926c13cad3 Mon Sep 17 00:00:00 2001
From: chvmvd <chvmvd@users.noreply.github.com>
Date: Thu, 24 Nov 2022 00:01:52 +0900
Subject: [PATCH 7/7] =?UTF-8?q?lint=E3=81=AE=E3=82=A8=E3=83=A9=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LifeGame/{nextGeneration.ts => nextGeneration.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/LifeGame/{nextGeneration.ts => nextGeneration.tsx} (100%)

diff --git a/src/components/LifeGame/nextGeneration.ts b/src/components/LifeGame/nextGeneration.tsx
similarity index 100%
rename from src/components/LifeGame/nextGeneration.ts
rename to src/components/LifeGame/nextGeneration.tsx
