feat(post tools label): add spoiler label next to post tools buttons

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"
 }

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"
 }

src/components/post-tools/post-tools-label/index.ts

@@ -0,0 +1 @@
+export {default} from './post-tools-label';

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

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;

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')}`}