@material-ui/icons#BluetoothSearching JavaScript Examples

The following examples show how to use @material-ui/icons#BluetoothSearching. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: BluetoothPage.jsx From pwa with MIT License

5 votes

export default function BluetoothPage() {
  let history = useHistory();
  const dispatch = useDispatch();
  const unique_id = useSelector((state) => state.MyActivities.user.unique_id);
  const [showTooltip, setShowTooltip] = useState(false);

  const handleCodeClick = () => {
    setShowTooltip(true);
    navigator.clipboard.writeText(`person:${unique_id}`);
    setTimeout(() => {
      setShowTooltip(false);
    }, 2000);
  };

  return (
    <>
      <AppBar position="static" className="activity-header">
        <Toolbar>
          <img alt="mask" src={logo} className="app-header-logo" />
          <IconButton
            color="inherit"
            onClick={() => {
              dispatch(showNav());
              history.push('/my-activities');
            }}
          >
            <KeyboardBackspace />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Box className={styles['bt-box']}>
        <div className={styles['bt-box-body']}>
          <BluetoothSearching style={{ fontSize: 150, color: '#ff005c' }} />
          <Paper elevation={0} className={styles['uid-paper']}>
            <span>{'کد شخصی شما'}</span>
            <Tooltip
              PopperProps={{
                disablePortal: true,
              }}
              onClose={() => setShowTooltip(false)}
              open={showTooltip}
              disableFocusListener
              disableHoverListener
              disableTouchListener
              title="کپی شد!"
              placement="top"
            >
              <Button className={styles['uid-btn']} onClick={handleCodeClick}>
                {`person:${unique_id}`}
              </Button>
            </Tooltip>
          </Paper>
        </div>
      </Box>
      <Box className="warning-box">
        <Typography>
          برای ثبت ملاقات توسط افراد نزدیک به شما توسط بلوتوث، کد بالا را در نام
          بلوتوث دستگاه خود قرار دهید.
        </Typography>
        <Typography component="span" variant="caption">
          این کد حاوی هیچ گونه اطلاعات شخصی یا درمانی شما نیست و تنها جهت
          شناسایی شما در نرم‌افزار استفاده می‌شود.
        </Typography>
      </Box>
    </>
  );
}