snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/audio-translation/components/native/TranslationLabel.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { IconTranslate } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/native/Label';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import { isAudioTranslationActiveInMeeting, isAudioTranslationAvailable } from '../../functions';
+
+const styles = {
+    translationLabel: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.action01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        flexDirection: 'row',
+        marginBottom: BaseTheme.spacing[0],
+        marginLeft: BaseTheme.spacing[0]
+    }
+};
+
+/**
+ * Conference-header label shown while audio translation is active in the meeting.
+ *
+ * @returns {ReactElement|null}
+ */
+const TranslationLabel = () => {
+    const available = useSelector(isAudioTranslationAvailable);
+    const active = useSelector(isAudioTranslationActiveInMeeting);
+
+    return available && active ? (
+        <Label
+            icon = { IconTranslate }
+            iconColor = { BaseTheme.palette.icon01 }
+            style = { styles.translationLabel } />
+    ) : null;
+};
+
+export default TranslationLabel;