add file

code/frontend/src/components/Bio.tsx

@@ -1,8 +1,20 @@
+import { Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
+import { useState } from "react";
+import "./bio.css";
+import "../styles/colors.css";
+import IconButton from "@mui/material/IconButton";
+import EditSquareIcon from "@mui/icons-material/EditSquare";
+import ButtonPrimary from "./ButtonPrimary";
 
 export default function MultilineTextFields() {
+  const toggleEditMode = () => {
+    isEditable(!editMode);
+  };
+  const [editMode, isEditable] = useState(false);
+
   return (
     <StyledEngineProvider injectFirst>
       <Box
@@ -15,11 +27,20 @@ export default function MultilineTextFields() {
           <TextField
             className="bio-input"
             id="outlined-multiline-flexible"
-            label="Multiline"
+            label="Bio"
             multiline
             maxRows={4}
+            disabled={!editMode}
           />
+          <IconButton aria-label="edit-bio">
+            <EditSquareIcon
+              className="edit-icon"
+              onClick={toggleEditMode}
+              style={{ display: editMode ? "none" : "block" }}
+            />
+          </IconButton>
         </div>
+        {editMode && <ButtonPrimary value={"Ok"} onClick={toggleEditMode} />}
       </Box>
     </StyledEngineProvider>
   );