From 4e0ec8d1eb407632813e0e5695a7c5c1538c95df Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sun, 20 Mar 2022 19:12:54 +0100
Subject: [PATCH] generic spoiler component

---
 resources/js/components/common/Spoiler.js | 19 +++++++++++++++++++
 resources/sass/common.scss                | 15 +++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 resources/js/components/common/Spoiler.js

diff --git a/resources/js/components/common/Spoiler.js b/resources/js/components/common/Spoiler.js
new file mode 100644
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 80b8b2a..6a4be9f 100644
--- 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;
 }
-- 
2.39.2