"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7547/react/features/base/ui/components/web/ClickableIcon.tsx" (25 Sep 2023, 1557 Bytes) of package /linux/misc/jitsi-meet-7547.tar.gz:

As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. 
    1 import React from 'react';
    2 import { makeStyles } from 'tss-react/mui';
    3 
    4 import { isMobileBrowser } from '../../../environment/utils';
    5 import Icon from '../../../icons/components/Icon';
    6 
    7 interface IProps {
    8     accessibilityLabel: string;
    9     className?: string;
   10     icon: Function;
   11     id?: string;
   12     onClick: () => void;
   13 }
   14 
   15 const useStyles = makeStyles()(theme => {
   16     return {
   17         button: {
   18             padding: '2px',
   19             backgroundColor: theme.palette.action03,
   20             border: 0,
   21             outline: 0,
   22             borderRadius: `${theme.shape.borderRadius}px`,
   23 
   24             '&:hover': {
   25                 backgroundColor: theme.palette.ui02
   26             },
   27 
   28             '&.focus-visible': {
   29                 outline: 0,
   30                 boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`
   31             },
   32 
   33             '&:active': {
   34                 backgroundColor: theme.palette.ui03
   35             },
   36 
   37             '&.is-mobile': {
   38                 padding: '10px'
   39             }
   40         }
   41     };
   42 });
   43 
   44 const ClickableIcon = ({ accessibilityLabel, className, icon, id, onClick }: IProps) => {
   45     const { classes: styles, cx } = useStyles();
   46     const isMobile = isMobileBrowser();
   47 
   48     return (
   49         <button
   50             aria-label = { accessibilityLabel }
   51             className = { cx(styles.button, isMobile && 'is-mobile', className) }
   52             id = { id }
   53             onClick = { onClick }>
   54             <Icon
   55                 size = { 24 }
   56                 src = { icon } />
   57         </button>
   58     );
   59 };
   60 
   61 export default ClickableIcon;