jitsi-meet/react/features/speaker-stats/components/web/SpeakerStatsList.tsx

import React from 'react';
import { makeStyles } from 'tss-react/mui';

import { MOBILE_BREAKPOINT } from '../../constants';
import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';

import SpeakerStatsItem from './SpeakerStatsItem';

const useStyles = makeStyles()(theme => {
    return {
        list: {
            paddingTop: 90,
            '& .item': {
                height: theme.spacing(7),
                [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
                    height: theme.spacing(8)
                },
                '& .has-left': {
                    color: theme.palette.text03
                },
                '& .avatar': {
                    marginRight: theme.spacing(3)
                },
                '& .time': {
                    padding: '2px 4px',
                    borderRadius: '4px',
                    ...theme.typography.labelBold,
                    [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
                        ...theme.typography.bodyShortRegularLarge
                    },
                    backgroundColor: theme.palette.ui02
                },
                '& .display-name': {
                    ...theme.typography.bodyShortRegular,
                    [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
                        ...theme.typography.bodyShortRegularLarge
                    }
                },
                '& .dominant': {
                    backgroundColor: theme.palette.success02
                }
            }

        }
    };
});

/**
 * Component that renders the list of speaker stats.
 *
 * @returns {React$Element<any>}
 */
const SpeakerStatsList = () => {
    const { classes } = useStyles();
    const items = abstractSpeakerStatsList(SpeakerStatsItem);

    return (
        <div className = { classes.list }>
            <div className = 'separator' />
            {items}
        </div>
    );
};

export default SpeakerStatsList;