Merge pull request #25 from YoungerMax/dev

Add header block functionality

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;
+}

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>
     )
 }