From 6aba41c3d94eca1637ce21a0dd98d2d0f8d9fc56 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 1 Feb 2024 03:58:36 -0800
Subject: [PATCH] Add spoiler UI component

---
 src/renderer/components/index.ts              |  1 +
 src/renderer/components/spoiler/index.tsx     | 41 +++++++++++++++++++
 .../components/spoiler/spoiler.module.scss    |  9 ++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/renderer/components/spoiler/index.tsx
 create mode 100644 src/renderer/components/spoiler/spoiler.module.scss

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index 226c5883..7d3b252f 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -27,6 +27,7 @@ export * from './select';
 export * from './skeleton';
 export * from './slider';
 export * from './spinner';
+export * from './spoiler';
 export * from './switch';
 export * from './tabs';
 export * from './text';
diff --git a/src/renderer/components/spoiler/index.tsx b/src/renderer/components/spoiler/index.tsx
new file mode 100644
index 00000000..ef7a5d2d
--- /dev/null
+++ b/src/renderer/components/spoiler/index.tsx
@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { Spoiler as MantineSpoiler } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import styles from './spoiler.module.scss';
+
+type SpoilerProps = {
+    children: ReactNode;
+    hideLabel?: boolean;
+    initialState?: boolean;
+    maxHeight: number;
+    showLabel?: ReactNode;
+    transitionDuration?: number;
+};
+
+export const Spoiler = ({
+    hideLabel,
+    initialState,
+    maxHeight,
+    showLabel,
+    transitionDuration,
+    children,
+}: SpoilerProps) => {
+    const { t } = useTranslation();
+
+    return (
+        <MantineSpoiler
+            classNames={{
+                content: styles.content,
+                control: styles.control,
+                root: styles.root,
+            }}
+            hideLabel={hideLabel ?? t('common.collapse', { postProcess: 'sentenceCase' })}
+            initialState={initialState}
+            maxHeight={maxHeight ?? 75}
+            showLabel={showLabel ?? t('common.expand', { postProcess: 'sentenceCase' })}
+            transitionDuration={transitionDuration}
+        >
+            {children}
+        </MantineSpoiler>
+    );
+};
diff --git a/src/renderer/components/spoiler/spoiler.module.scss b/src/renderer/components/spoiler/spoiler.module.scss
new file mode 100644
index 00000000..a7b51068
--- /dev/null
+++ b/src/renderer/components/spoiler/spoiler.module.scss
@@ -0,0 +1,9 @@
+.control {
+    color: var(--btn-subtle-fg);
+    font-weight: 600;
+}
+
+.control:hover {
+    color: var(--btn-subtle-fg-hover);
+    text-decoration: none;
+}