Starting InlineEdit component

frontend/src/components/Footer/index.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import style from "./index.module.scss";
 
-
 function FooterPage() {
   return <Footer id="footer" height={70} className={style.footer}>
         Made by Pwnzer0tt1

frontend/src/components/InlineEdit/index.module.scss

@@ -0,0 +1,20 @@
+@use "../../vars" as *;
+@use "../../index.scss" as *;
+
+.click_to_edit {
+    background-color: #1B1B1B;
+    border: 0;
+    padding: 5px 8px;
+    min-width: 10px;
+    user-select: none;
+    border-radius: 13px;
+}
+
+.click_to_edit:hover {
+    cursor: text;
+    background-color: #1B1B1B;
+}
+
+.click_to_edit:focus {
+    outline: none;
+}

frontend/src/components/InlineEdit/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import style from "./index.module.scss";
+
+const InlineEdit = ({ value, setValue, ...others }:{ value:string, setValue: (s:string)=>void}) => {
+  return (
+    <span
+      role="textbox"
+      contentEditable
+      className={style.click_to_edit}
+      aria-label="Field name"
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === "Escape") {
+          event.target.blur();
+        }
+      }}
+      onBlur={(event) => {
+        setValue((event.target as HTMLSpanElement).textContent ?? "");
+      }}
+      {...others}
+    />
+  )
+}
+
+export default InlineEdit;