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

react/features/prejoin/components/web/country-picker/CountryRow.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+
+interface IProps {
+
+    /**
+     * Country of the entry.
+     */
+    country: { code: string; dialCode: string; name: string; };
+
+    /**
+     * Entry click handler.
+     */
+    onEntryClick: Function;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            display: 'flex',
+            padding: '10px',
+            alignItems: 'center',
+            backgroundColor: theme.palette.prejoinCountryRowBackground,
+
+            '&:hover': {
+                backgroundColor: theme.palette.prejoinCountryRowHover
+            }
+        },
+
+        flag: {
+            marginRight: theme.spacing(2)
+        },
+
+        text: {
+            color: theme.palette.prejoinCountryPickerText,
+            ...theme.typography.bodyShortRegular,
+            flexGrow: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }
+    };
+});
+
+const CountryRow = ({ country, onEntryClick }: IProps) => {
+    const { classes, cx } = useStyles();
+
+    const _onClick = () => {
+        onEntryClick(country);
+    };
+
+    return (
+        <div
+            className = { classes.container }
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick = { _onClick }>
+            <div className = { cx(classes.flag, 'iti-flag', country.code) } />
+            <div className = { classes.text }>
+                {`${country.name} (+${country.dialCode})`}
+            </div>
+        </div>
+    );
+};
+
+export default CountryRow;