text: import axios from 'axios';
  import { useState, useEffect } from 'react';
  import { Icon } from '@iconify/react';
  import peopleFill from '@iconify/icons-eva/people-fill';
  // material
  import { alpha, styled } from '@mui/material/styles';
  import { Card, Typography } from '@mui/material';
  // utils
  import { fShortenNumber } from '../../../utils/formatNumber';
  // import USERS from '../../../_mocks_/attendee';
  
  // ----------------------------------------------------------------------
  
  const RootStyle = styled(Card)(({ theme }) => ({
    boxShadow: 'none',
    textAlign: 'center',
    padding: theme.spacing(5, 0),
    color: theme.palette.info.darker,
    backgroundColor: theme.palette.info.lighter
  }));
  
  const IconWrapperStyle = styled('div')(({ theme }) => ({
    margin: 'auto',
    display: 'flex',
    borderRadius: '50%',
    alignItems: 'center',
    width: theme.spacing(8),
    height: theme.spacing(8),
    justifyContent: 'center',
    marginBottom: theme.spacing(3),
    color: theme.palette.info.dark,
    backgroundImage: `linear-gradient(135deg, ${alpha(theme.palette.info.dark, 0)} 0%, ${alpha(
      theme.palette.info.dark,
      0.24
    )} 100%)`
  }));
  
  // ----------------------------------------------------------------------
  
  export default function AppNewUsers() {
    const [users, setUsers] = useState([]);
    useEffect(() => {
      axios.get(`https://wr.raneddo.ml/api/User`).then((res) => {
        setUsers(res.data);
      });
    }, []);
    return (
      <RootStyle>
        <IconWrapperStyle>
          <Icon icon={peopleFill} width={24} height={24} />
        </IconWrapperStyle>
        <Typography variant="h3">{fShortenNumber(users.length)}</Typography>
        <Typography variant="subtitle2" sx={{ opacity: 0.72 }}>
          Total Attendees
        </Typography>
      </RootStyle>
    );
  }
  