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

react/features/audio-translation/components/web/AudioTranslationLanguageItem.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+interface IProps {
+
+    /**
+     * The target language code, or null for the "off" option.
+     */
+    code: string | null;
+
+    /**
+     * The label to display.
+     */
+    label: string;
+
+    /**
+     * Called with this item's code when it is selected.
+     */
+    onSelect: (code: string | null) => void;
+
+    /**
+     * Whether this item is the currently-selected option.
+     */
+    selected: boolean;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        item: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: '12px 16px',
+            cursor: 'pointer',
+            border: 'none',
+            background: 'none',
+            textAlign: 'left',
+            fontSize: '0.875rem',
+            color: theme.palette.text01,
+            borderRadius: `${theme.shape.borderRadius}px`,
+            '&:hover': {
+                backgroundColor: theme.palette.ui02
+            }
+        },
+        selected: {
+            fontWeight: 700,
+            color: theme.palette.link01
+        }
+    };
+});
+
+/**
+ * A single selectable language row in the audio-translation dialog.
+ *
+ * @param {IProps} props - The component's props.
+ * @returns {ReactElement}
+ */
+const AudioTranslationLanguageItem = ({ code, label, onSelect, selected }: IProps) => {
+    const { classes: styles, cx } = useStyles();
+    const onClick = useCallback(() => onSelect(code), [ code, onSelect ]);
+
+    return (
+        <button
+            className = { cx(styles.item, selected && styles.selected) }
+            onClick = { onClick }
+            type = 'button'>
+            { label }
+        </button>
+    );
+};
+
+export default AudioTranslationLanguageItem;