From 334dd88fde8feb55b74f7d3014f074930ee0d59a Mon Sep 17 00:00:00 2001
From: YoungerMax <60242131+YoungerMax@users.noreply.github.com>
Date: Fri, 30 Jun 2023 20:08:42 -0400
Subject: [PATCH] Add header block functionality

---
 .../components/note/contentblock/headerblock.css  | 15 +++++++++++++++
 .../components/note/contentblock/headerblock.tsx  |  6 +++++-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/note/contentblock/headerblock.css

diff --git a/web/src/components/note/contentblock/headerblock.css b/web/src/components/note/contentblock/headerblock.css
new file mode 100644
index 0000000..9c213a0
--- /dev/null
+++ b/web/src/components/note/contentblock/headerblock.css
@@ -0,0 +1,15 @@
+.headerblock-header {
+    font-size: 2em;
+    border: none;
+    font-weight: bold;
+    width: 100%;
+
+    padding-bottom: 4px;
+    border-bottom: 2px solid #888888;
+}
+
+.headerblock-header::placeholder {
+    font-weight: 400;
+    font-style: italic;
+    color: #888888;
+}
\ No newline at end of file
diff --git a/web/src/components/note/contentblock/headerblock.tsx b/web/src/components/note/contentblock/headerblock.tsx
index e1a7f31..b608a56 100644
--- a/web/src/components/note/contentblock/headerblock.tsx
+++ b/web/src/components/note/contentblock/headerblock.tsx
@@ -1,13 +1,17 @@
+import { useState } from "react";
 import "./contentblock.css"
+import "./headerblock.css"
 
 interface HeaderProps {
     text: string;
 }
 
 export default function HeaderBlock(props: HeaderProps) {
+    let [ headerText, setHeaderText ] = useState<string>(props.text);
+
     return (
         <div className="contentblock">
-            <h1 className="header">{props.text}</h1>
+            <input type='text' className="headerblock-header" placeholder="Section header..." value={headerText} onChange={ e => setHeaderText(e.target.value) }/>
         </div>
     )
 }
\ No newline at end of file