From 64087f611f0d1d86d703c702e0dace2dbc9fc28a Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Mon, 16 Oct 2023 21:49:07 +0200
Subject: [PATCH] feat(post tools label): add spoiler label next to post tools
 buttons

---
 public/translations/en/default.json           |  3 ++-
 public/translations/it/default.json           |  3 ++-
 .../post-tools/post-tools-label/index.ts      |  1 +
 .../post-tools-label.module.css               | 10 ++++++++
 .../post-tools-label/post-tools-label.tsx     | 24 +++++++++++++++++++
 src/components/post-tools/post-tools.tsx      |  4 +++-
 6 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/components/post-tools/post-tools-label/index.ts
 create mode 100644 src/components/post-tools/post-tools-label/post-tools-label.module.css
 create mode 100644 src/components/post-tools/post-tools-label/post-tools-label.tsx

diff --git a/public/translations/en/default.json b/public/translations/en/default.json
index 98270e91..fb520dd4 100644
--- a/public/translations/en/default.json
+++ b/public/translations/en/default.json
@@ -33,5 +33,6 @@
   "time_1_month_ago": "1 month ago",
   "time_x_months_ago": "{{count}} months ago",
   "time_1_year_ago": "1 year ago",
-  "time_x_years_ago": "{{count}} years ago"
+  "time_x_years_ago": "{{count}} years ago",
+  "post_label_spoiler": "spoiler"
 }
\ No newline at end of file
diff --git a/public/translations/it/default.json b/public/translations/it/default.json
index b3cb535d..53cd63e7 100644
--- a/public/translations/it/default.json
+++ b/public/translations/it/default.json
@@ -33,5 +33,6 @@
   "time_1_month_ago": "1 mese fa",
   "time_x_months_ago": "{{count}} mesi fa",
   "time_1_year_ago": "1 anno fa",
-  "time_x_years_ago": "{{count}} anni fa"
+  "time_x_years_ago": "{{count}} anni fa",
+  "post_label_spoiler": "spoiler"
 }
\ No newline at end of file
diff --git a/src/components/post-tools/post-tools-label/index.ts b/src/components/post-tools/post-tools-label/index.ts
new file mode 100644
index 00000000..81ecb69b
--- /dev/null
+++ b/src/components/post-tools/post-tools-label/index.ts
@@ -0,0 +1 @@
+export {default} from './post-tools-label';
\ No newline at end of file
diff --git a/src/components/post-tools/post-tools-label/post-tools-label.module.css b/src/components/post-tools/post-tools-label/post-tools-label.module.css
new file mode 100644
index 00000000..ec082de8
--- /dev/null
+++ b/src/components/post-tools/post-tools-label/post-tools-label.module.css
@@ -0,0 +1,10 @@
+.stamp {
+  color: var(--text);
+  border-color: currentColor;
+  border-radius: 3px;
+  border: 1px solid;
+  display: inline-block;
+  font-size: 10px;
+  line-height: 14px;
+  padding: 0 4px;
+}
\ No newline at end of file
diff --git a/src/components/post-tools/post-tools-label/post-tools-label.tsx b/src/components/post-tools/post-tools-label/post-tools-label.tsx
new file mode 100644
index 00000000..8766115f
--- /dev/null
+++ b/src/components/post-tools/post-tools-label/post-tools-label.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import styles from './post-tools-label.module.css';
+import { useComment } from '@plebbit/plebbit-react-hooks';
+import { useTranslation } from 'react-i18next';
+
+interface PostToolsLabelProps {
+  commentCid: string;
+}
+
+const PostToolsLabel: FC<PostToolsLabelProps> = ({ commentCid }) => {
+  const comment = useComment({ commentCid });
+  const { spoiler } = comment;
+  const { t } = useTranslation();
+
+  return (
+    <li>
+      <span className={styles.stamp}>
+        <span className={styles.content}>{spoiler && t('post_label_spoiler').toUpperCase()}</span>
+      </span>
+    </li>
+  );
+};
+
+export default PostToolsLabel;
diff --git a/src/components/post-tools/post-tools.tsx b/src/components/post-tools/post-tools.tsx
index 7df6261e..0593bc4f 100644
--- a/src/components/post-tools/post-tools.tsx
+++ b/src/components/post-tools/post-tools.tsx
@@ -3,6 +3,7 @@ import styles from './post-tools.module.css';
 import { useComment } from '@plebbit/plebbit-react-hooks';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import PostToolsLabel from './post-tools-label';
 
 interface PostToolsProps {
   commentCid: string;
@@ -11,11 +12,12 @@ interface PostToolsProps {
 const PostTools: FC<PostToolsProps> = ({ commentCid }) => {
   const comment = useComment({ commentCid });
   const subplebbitAddress = comment.subplebbitAddress;
-  const { cid, replyCount } = comment;
+  const { cid, replyCount, spoiler } = comment;
   const { t } = useTranslation();
 
   return (
     <ul className={styles.buttons}>
+      {spoiler && <PostToolsLabel commentCid={cid} />}
       <li className={styles.first}>
         <Link to={`p/${subplebbitAddress}/c/${cid}`} onClick={(e) => e.preventDefault()}>
           {replyCount === 0 ? t('feed_post_no_comments') : `${replyCount} ${replyCount === 1 ? t('feed_post_comment') : t('feed_post_comments')}`}