generic spoiler component

diff --git a/resources/js/components/common/Spoiler.js b/resources/js/components/common/Spoiler.js
new file mode 100644 (file)
index 0000000..c4995dc
--- /dev/null
+++ b/resources/js/components/common/Spoiler.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+const Spoiler = ({ children }) => {
+       const [show, setShow] = useState(false);
+
+       return <span
+               className={`spoiler ${show ? 'shown' : 'hidden'}`}
+               onClick={() => setShow(true)}
+       >
+               <span className="content">{children}</span>
+       </span>;
+};
+
+Spoiler.propTypes = {
+       children: PropTypes.node,
+};
+
+export default Spoiler;

diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 80b8b2a62e83293435f9d35a3b48437c210364e3..6a4be9fcbc2df9f5aab09e5f0a8761435916fb34 100644 (file)
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -11,6 +11,21 @@ h1 {
        margin-bottom: 2rem;
 }
 
+.spoiler {
+       border-radius: 0.5ex;
+       padding: 0 0.5ex;
+       background: $dark;
+       color: $light;
+
+       &.hidden {
+               cursor: pointer;
+
+               > .content {
+                       visibility: hidden;
+               }
+       }
+}
+
 .text-discord {
        color: $discord;
 }