From 0193f2efc8a03c35cde08ff2963c02dae15a812d Mon Sep 17 00:00:00 2001
From: DomySh <me@domysh.com>
Date: Fri, 12 Aug 2022 07:52:01 +0000
Subject: [PATCH] Starting InlineEdit component

---
 frontend/src/_vars.scss                       |  2 +-
 frontend/src/components/Footer/index.tsx      |  1 -
 .../components/InlineEdit/index.module.scss   | 20 ++++++++++++++++
 frontend/src/components/InlineEdit/index.tsx  | 24 +++++++++++++++++++
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100755 frontend/src/components/InlineEdit/index.module.scss
 create mode 100755 frontend/src/components/InlineEdit/index.tsx

diff --git a/frontend/src/_vars.scss b/frontend/src/_vars.scss
index e65237e..6df635d 100755
--- a/frontend/src/_vars.scss
+++ b/frontend/src/_vars.scss
@@ -1,4 +1,4 @@
 
 $primary_color: #242a33;
-$second_color: #1A1B1E;
+$secondary_color: #1A1B1E;
 $third_color:#25262b;
diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
index 7f61c54..bcc4588 100755
--- a/frontend/src/components/Footer/index.tsx
+++ b/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
diff --git a/frontend/src/components/InlineEdit/index.module.scss b/frontend/src/components/InlineEdit/index.module.scss
new file mode 100755
index 0000000..80d14cf
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/components/InlineEdit/index.tsx b/frontend/src/components/InlineEdit/index.tsx
new file mode 100755
index 0000000..cda39e4
--- /dev/null
+++ b/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;