Add MUI alert

react-again-tutorial/src/App.tsx

@@ -1,8 +1,9 @@
 import ListGroup from "./components/ListGroup";
-import Alert from "./components/Alert";
+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";
 
 // Following tutorial https://www.youtube.com/watch?v=SqcY0GlETPk
 
@@ -21,12 +22,20 @@ function App() {
   return (
     <div>
       {alertVisible && (
-        <Alert onClose={() => setAlertVisible(false)}>This is bad</Alert>
+        <Alert onClose={() => setAlertVisible(false)} severity="error">
+          This is bad
+        </Alert>
       )}
       <MyButt name="LöBöttån!" onClick={() => setAlertVisible(true)}>
         Maan
       </MyButt>
-      {<Button variant="contained">Hello World</Button>}
+      <Button
+        disabled={alertVisible}
+        variant="contained"
+        onMouseEnter={() => setAlertVisible(true)}
+      >
+        Hello World
+      </Button>
       <ListGroup
         items={items}
         heading="Man shit list"

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

@@ -5,7 +5,7 @@ interface Props {
   onClose: () => void;
 }
 
-const Alert = ({ children, onClose }: Props) => {
+const MyAlert = ({ children, onClose }: Props) => {
   return (
     <>
       <div className="alert alert-primary alert-dismissible" role="alert">
@@ -22,4 +22,4 @@ const Alert = ({ children, onClose }: Props) => {
   );
 };
 
-export default Alert;
+export default MyAlert;