Add spoiler UI component

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';

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>
+    );
+};

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;
+}