From af52bf2fd67ea08ff2b86c9676630cca55151b4b Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 20 Jul 2021 02:32:35 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Todo=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Todo/Readme.md        | 26 ++++++++++++++++++++++++++
 src/components/Todo/index.js         | 26 ++++++++++++++++++++++++++
 src/components/Todo/index.module.css |  5 +++++
 src/components/index.js              |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 src/components/Todo/Readme.md
 create mode 100644 src/components/Todo/index.js
 create mode 100644 src/components/Todo/index.module.css

diff --git a/src/components/Todo/Readme.md b/src/components/Todo/Readme.md
new file mode 100644
index 0000000..e8c4972
--- /dev/null
+++ b/src/components/Todo/Readme.md
@@ -0,0 +1,26 @@
+An component which can be used to mark incomplete parts of the website.
+
+Its contents are printed to the console with `console.debug`.
+
+**[Doesn't currently use Bluelib](https://github.com/RYGhub/bluelib/issues/16), but is included as it is a very common component to implement.**
+
+```jsx
+<Todo>
+    Write a better example!
+</Todo>
+```
+
+It is also available in `block` form:
+
+```jsx
+import LatexMath from "../LatexMath";
+
+<div>
+    Useful for block formulas:
+    <Todo block={true}>
+        <LatexMath block={true}>{`
+            1 + 1 = 2
+        `}</LatexMath>
+    </Todo>
+</div>
+```
diff --git a/src/components/Todo/index.js b/src/components/Todo/index.js
new file mode 100644
index 0000000..376ae9b
--- /dev/null
+++ b/src/components/Todo/index.js
@@ -0,0 +1,26 @@
+import React, { useEffect } from "react"
+import PropTypes from "prop-types"
+import Style from "./index.module.css"
+
+
+export default function Todo({ children, block }) {
+    useEffect(() => {
+        console.debug("TODO:", { children })
+    }, [])
+
+    if(block) {
+        return (
+            <div className={Style.Todo}>{children}</div>
+        )
+    }
+    else {
+        return (
+            <span className={Style.Todo}>🚧 {children}</span>
+        )
+    }
+}
+
+Todo.propTypes = {
+    children: PropTypes.node,
+    block: PropTypes.bool,
+}
diff --git a/src/components/Todo/index.module.css b/src/components/Todo/index.module.css
new file mode 100644
index 0000000..2f59103
--- /dev/null
+++ b/src/components/Todo/index.module.css
@@ -0,0 +1,5 @@
+.Todo {
+    background-color: #292F33;
+    border: 2px dashed #FFCC4D;
+    color: #FFCC4D;
+}
diff --git a/src/components/index.js b/src/components/index.js
index 71a27d7..1504745 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -28,3 +28,4 @@ export {default as ButtonToggle} from "./ButtonToggle"
 export {default as Form} from "./Form"
 export {default as FormElement} from "./FormElement"
 export {default as FormSubmit} from "./FormSubmit"
+export {default as Todo} from "./Todo"