Merge branch 'codex/fix/tor-flag-tooltip'

src/components/post-author-flags.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { getCommentFlagFlairs, getAuthorFlagViewModels } from '../lib/comment-flags';
 import styles from '../views/post/post.module.css';
 
@@ -11,6 +12,8 @@ const getBackgroundPosition = (x: number, y: number) => `${x === 0 ? 0 : -x}px $
 const transparentPixelSrc = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3C/svg%3E';
 
 const PostAuthorFlags = ({ author, comment, enabled }: PostAuthorFlagsProps) => {
+  const { t } = useTranslation();
+
   if (!enabled) return null;
 
   const flags = getAuthorFlagViewModels(getCommentFlagFlairs(comment, author));
@@ -18,21 +21,24 @@ const PostAuthorFlags = ({ author, comment, enabled }: PostAuthorFlagsProps) =>
 
   return (
     <span className={styles.authorFlags}>
-      {flags.map((flag) => (
-        <img
-          key={flag.key}
-          alt={flag.label}
-          className={styles.authorFlag}
-          src={transparentPixelSrc}
-          style={{
-            backgroundImage: `url("${flag.spritePath}")`,
-            backgroundPosition: getBackgroundPosition(flag.x, flag.y),
-            width: flag.width,
-            height: flag.height,
-          }}
-          title={flag.label}
-        />
-      ))}
+      {flags.map((flag) => {
+        const label = flag.labelKey ? t(flag.labelKey, flag.label) : flag.label;
+        return (
+          <img
+            key={flag.key}
+            alt={label}
+            className={styles.authorFlag}
+            src={transparentPixelSrc}
+            style={{
+              backgroundImage: `url("${flag.spritePath}")`,
+              backgroundPosition: getBackgroundPosition(flag.x, flag.y),
+              width: flag.width,
+              height: flag.height,
+            }}
+            title={label}
+          />
+        );
+      })}
     </span>
   );
 };