Introduce some MUI components. Remove bootstrap from top folder.

package-lock.json

@@ -2,39 +2,5 @@
   "name": "react-again",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "bootstrap": "^5.3.0-alpha3"
-      }
-    },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
-    "node_modules/bootstrap": {
-      "version": "5.3.0-alpha3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz",
-      "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.7"
-      }
-    }
-  }
+  "packages": {}
 }

package.json

@@ -1,5 +1 @@
-{
-  "dependencies": {
-    "bootstrap": "^5.3.0-alpha3"
-  }
-}
+{}

react-again-tutorial/package-lock.json

@@ -8,14 +8,15 @@
       "name": "react-again-tutorial",
       "version": "0.0.0",
       "dependencies": {
-        "@emotion/react": "^11.10.8",
-        "@emotion/styled": "^11.10.8",
+        "@emotion/react": "^11.11.0",
+        "@emotion/styled": "^11.11.0",
         "@mui/material": "^5.12.3",
+        "bootstrap": "^5.2.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
-        "@types/react": "^18.2.5",
+        "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
         "@vitejs/plugin-react": "^4.0.0",
         "typescript": "^5.0.4",
@@ -370,76 +371,65 @@
       }
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz",
-      "integrity": "sha512-gxNky50AJL3AlkbjvTARiwAqei6/tNUxDZPSKd+3jqWVM3AmdVTTdpjHorR/an/M0VJqdsuq5oGcFH+rjtyujQ==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.0",
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/serialize": "^1.1.1",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
         "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.4"
-      }
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "stylis": "4.2.0"
       }
     },
     "node_modules/@emotion/cache": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.8.tgz",
-      "integrity": "sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
       "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.4"
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
       }
     },
     "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=="
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
     },
     "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==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
       "dependencies": {
-        "@emotion/memoize": "^0.8.0"
+        "@emotion/memoize": "^0.8.1"
       }
     },
     "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=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.8.tgz",
-      "integrity": "sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.8",
-        "@emotion/cache": "^11.10.8",
-        "@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",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
         "hoist-non-react-statics": "^3.3.1"
       },
       "peerDependencies": {
@@ -452,33 +442,33 @@
       }
     },
     "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==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
       "dependencies": {
-        "@emotion/hash": "^0.9.0",
-        "@emotion/memoize": "^0.8.0",
-        "@emotion/unitless": "^0.8.0",
-        "@emotion/utils": "^1.2.0",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
         "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=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
     },
     "node_modules/@emotion/styled": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.8.tgz",
-      "integrity": "sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw==",
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.8",
-        "@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/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
       },
       "peerDependencies": {
         "@emotion/react": "^11.0.0-rc.0",
@@ -491,27 +481,27 @@
       }
     },
     "node_modules/@emotion/unitless": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
-      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
     "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==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
       "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=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
     },
     "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=="
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@esbuild/android-arm": {
       "version": "0.17.18",
@@ -1155,9 +1145,9 @@
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.5",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.5.tgz",
-      "integrity": "sha512-RuoMedzJ5AOh23Dvws13LU9jpZHIc/k90AgmK7CecAYeWmSr3553L4u5rk4sWAPBuQosfT7HmTfG4Rg5o4nGEA==",
+      "version": "18.2.6",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
+      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1182,9 +1172,9 @@
       }
     },
     "node_modules/@types/react-is/node_modules/@types/react": {
-      "version": "17.0.58",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.58.tgz",
-      "integrity": "sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A==",
+      "version": "17.0.59",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.59.tgz",
+      "integrity": "sha512-gSON5zWYIGyoBcycCE75E9+r6dCC2dHdsrVkOEiIYNU5+Q28HcBAuqvDuxHcCbMfHBHdeT5Tva/AFn3rnMKE4g==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1247,6 +1237,24 @@
         "npm": ">=6"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
@@ -1284,9 +1292,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001482",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz",
-      "integrity": "sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==",
+      "version": "1.0.30001486",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz",
+      "integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==",
       "dev": true,
       "funding": [
         {
@@ -1316,6 +1324,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/chalk/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -1449,11 +1465,14 @@
       }
     },
     "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/find-root": {
@@ -1880,9 +1899,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.4.tgz",
-      "integrity": "sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",

react-again-tutorial/package.json

@@ -9,14 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.8",
-    "@emotion/styled": "^11.10.8",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.12.3",
+    "bootstrap": "^5.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.5",
+    "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react": "^4.0.0",
     "typescript": "^5.0.4",

react-again-tutorial/src/App.tsx

@@ -1,9 +1,21 @@
-import ListGroup from "./components/ListGroup";
+import ListGroupBS from "./components/ListGroupBS";
 import MyAlert from "./components/Alert";
 import { useState } from "react";
 import MyButt from "./components/MyButt";
 import Button from "@mui/material/Button";
 import Alert from "@mui/material/Alert";
+import ListGroupMUI from "./components/ListGroupMUI";
+import { createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@emotion/react";
+import { dark } from "@mui/material/styles/createPalette";
+import { Box, CssBaseline } from "@mui/material";
+import { blue, pink } from "@mui/material/colors";
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  RouterProvider,
+} from "react-router-dom";
 
 // Following tutorial https://www.youtube.com/watch?v=SqcY0GlETPk
 
@@ -19,34 +31,82 @@ function App() {
     setAlertVisible(false);
   };
 
+  const darkTheme = createTheme({
+    palette: {
+      mode: "dark",
+    },
+  });
+
+  const customTheme = createTheme({
+    palette: {
+      mode: "light",
+      primary: blue,
+      secondary: pink,
+    },
+    components: {
+      MuiListItemButton: {
+        styleOverrides: {
+          root: {
+            backgroundColor: "#00ff00",
+            accentColor: "#00ff00",
+            caretColor: "#00ff00",
+          },
+        },
+      },
+      MuiListItemText: {
+        styleOverrides: {
+          primary: {
+            color: "red",
+            background: "black",
+          },
+          secondary: {
+            color: "yellow",
+            background: "grey",
+          },
+        },
+      },
+    },
+  });
+
   return (
-    <div>
-      {alertVisible && (
-        <Alert onClose={() => setAlertVisible(false)} severity="error">
-          This is bad
-        </Alert>
-      )}
-      <MyButt name="LöBöttån!" onClick={() => setAlertVisible(true)}>
-        Maan
-      </MyButt>
-      <Button
-        disabled={alertVisible}
-        variant="contained"
-        onMouseEnter={() => setAlertVisible(true)}
-      >
-        Hello World
-      </Button>
-      <ListGroup
-        items={items}
-        heading="Man shit list"
-        onSelectItem={handleSelectItem}
-      />
-      <ListGroup
-        items={["Hoho", "Hihi", "Thhihih"]}
-        heading="Skrat prat datt"
-        onSelectItem={handleSelectItem}
-      />
-    </div>
+    <ThemeProvider theme={customTheme}>
+      <BrowserRouter></BrowserRouter>
+      <CssBaseline />
+      <div>
+        {alertVisible && (
+          <Alert onClose={() => setAlertVisible(false)} severity="error">
+            This is bad
+          </Alert>
+        )}
+        <MyButt name="LöBöttån!" onClick={() => setAlertVisible(true)}>
+          Maan
+        </MyButt>
+        <Button
+          disabled={alertVisible}
+          variant="contained"
+          onMouseEnter={() => setAlertVisible(true)}
+        >
+          Hello World
+        </Button>
+        <ListGroupBS
+          items={items}
+          heading="Man shit list"
+          onSelectItem={handleSelectItem}
+        />
+        <ListGroupBS
+          items={["Hoho", "Hihi", "Thhihih"]}
+          heading="Skrat prat datt"
+          onSelectItem={handleSelectItem}
+        />
+        <Box width={360}>
+          <ListGroupMUI
+            items={["This", "is", "MUI"]}
+            heading="MAGGA BAGGA HAGGA"
+            onSelectItem={handleSelectItem}
+          />
+        </Box>
+      </div>
+    </ThemeProvider>
   );
 }
 

react-again-tutorial/src/components/ListGroup.tsx → react-again-tutorial/src/components/ListGroupBS.tsx

@@ -1,16 +1,12 @@
 import { useState } from "react";
 
-interface ListGroupProps {
+interface Props {
   items: string[];
   heading: string;
   onSelectItem: (item: string) => void;
 }
 
-function ListGroup({
-  items,
-  heading,
-  onSelectItem: onSelectItem,
-}: ListGroupProps) {
+function ListGroupBS({ items, heading, onSelectItem: onSelectItem }: Props) {
   const [activeListItem, setActiveListItem] = useState(0);
 
   // Retired click handler
@@ -45,4 +41,4 @@ function ListGroup({
   );
 }
 
-export default ListGroup;
+export default ListGroupBS;

react-again-tutorial/src/components/ListGroupMUI.tsx

@@ -0,0 +1,34 @@
+import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { useState } from "react";
+
+interface Props {
+  items: string[];
+  heading: string;
+  onSelectItem: (item: string) => void;
+}
+
+function ListGroupMUI({ items, heading, onSelectItem }: Props) {
+  const [activeListItem, setActiveListItem] = useState(0);
+
+  return (
+    <>
+      <h1>{heading}</h1>
+      <List>
+        {items.map((item, index) => (
+          <ListItemButton
+            selected={index == activeListItem}
+            key={item}
+            onClick={() => {
+              setActiveListItem(index);
+              onSelectItem(item);
+            }}
+          >
+            <ListItemText primary={item} />
+          </ListItemButton>
+        ))}
+      </List>
+    </>
+  );
+}
+
+export default ListGroupMUI;