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 + + Write a better example! + +``` + +It is also available in `block` form: + +```jsx +import LatexMath from "../LatexMath"; + +
+ Useful for block formulas: + + {` + 1 + 1 = 2 + `} + +
+``` 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 ( +
{children}
+ ) + } + else { + return ( + 🚧 {children} + ) + } +} + +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"