diff --git a/src/components/post/comment-tools/comment-tools.tsx b/src/components/post/comment-tools/comment-tools.tsx
index 097ad922..00460168 100644
--- a/src/components/post/comment-tools/comment-tools.tsx
+++ b/src/components/post/comment-tools/comment-tools.tsx
@@ -222,16 +222,24 @@ const CommentToolsLabel = ({ cid, deleted, failed, editState, isReply, nsfw, rem
const failedEdit = editState === 'failed';
const pendingEdit = editState === 'pending';
+ const labels = [
+ { show: nsfw, color: 'nsfw-red', text: t('nsfw') },
+ { show: spoiler, color: 'black', text: t('spoiler') },
+ { show: pending, color: 'yellow', text: t('pending') },
+ { show: failed, color: 'red', text: t('failed') },
+ { show: deleted, color: 'red', text: t('deleted') },
+ { show: removed, color: 'red', text: t('removed') },
+ { show: failedEdit, color: 'red', text: t('failed_edit') },
+ { show: pendingEdit, color: 'yellow', text: t('pending_edit') },
+ ];
+
+ const visibleLabels = labels.filter((label) => label.show);
+
return (
<>
- {nsfw && }
- {spoiler && }
- {pending && }
- {failed && }
- {deleted && }
- {removed && }
- {failedEdit && }
- {pendingEdit && }
+ {visibleLabels.map((label, index) => (
+
+ ))}
>
);
};
diff --git a/src/components/post/label/label.module.css b/src/components/post/label/label.module.css
index b86a82c3..6647f6fa 100644
--- a/src/components/post/label/label.module.css
+++ b/src/components/post/label/label.module.css
@@ -12,6 +12,10 @@
padding: 0 5px;
}
+.firstInLine {
+ padding-left: 0 !important;
+}
+
.black {
color: var(--text);
border-color: currentColor;
diff --git a/src/components/post/label/label.tsx b/src/components/post/label/label.tsx
index 8738193c..1c907a87 100644
--- a/src/components/post/label/label.tsx
+++ b/src/components/post/label/label.tsx
@@ -4,13 +4,14 @@ import styles from './label.module.css';
interface LabelProps {
color: string;
text: string;
+ isFirstInLine?: boolean;
}
-const Label = ({ color, text }: LabelProps) => {
+const Label = ({ color, text, isFirstInLine = false }: LabelProps) => {
const { t } = useTranslation();
return (
-
+
{t(text)}
);