react-icons/md#MdAdd JavaScript Examples

export default function NavBar() {
  return (
    <Box
      boxShadow="base"
      px={4}
      bg="teal.500"
      position="fixed"
      w="100vw"
      zIndex="1"
    >
      <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
        <RouterLink to={'/'}>
          <Avatar size={'sm'} src={logo} alt="demo cart" />
        </RouterLink>
        <Flex alignItems={'center'}>
          <RouterLink to="/product/add">
            <Button
              variant={'solid'}
              colorScheme={'teal'}
              size={'sm'}
              leftIcon={<MdAdd />}
            >
              Add
            </Button>
          </RouterLink>
          <CartMenu />
          <ColorModeSwitcher justifySelf="flex-end" />
          <ProfileMenu />
        </Flex>
      </Flex>
    </Box>
  );
}

Contacts = () => {
  const { state, dispatch } = useContext(ContactContext);

  const { contacts, isLoading } = state;

  const history = useHistory();

  const AddContact = () => {
    dispatch({
      type: CONTACT_TO_UPDATE,
      payload: null,
      key: null
    })
    history.push("/contact/add");
  };

  if (isLoading) {
    return (
      <div className="Center">
        <Spinner color="primary" />
        <div className="text-primary">Loading...</div>
      </div>
    );
  }

  return (
    <Container className="mt-4">
      {
        contacts.length === 0 && !isLoading ?
          (
            <div className="Center text-large text-primary">
              No Contacts Found.
            </div>
          )
          :
          (
            <ListGroup>
              {Object.entries(contacts).map(([key, value]) => (
                <ListGroupItem key={key}>
                  <Contact contact={value} contactKey={key} />
                </ListGroupItem>
              ))}
            </ListGroup>
          )
      }
      <MdAdd className="fab icon " onClick={AddContact} />
    </Container>
  );
}

ControlsBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var video = props.video,
      ctt = props.ctt,
      _onMouseMove = props.onMouseMove,
      ofwidth = props.ofwidth,
      onSeek = props.onSeek,
      ct = props.ct,
      calcTime = props.calcTime,
      pause = props.pause,
      play = props.play,
      rewind = props.rewind,
      foward = props.foward,
      va = props.va,
      Mute = props.Mute,
      playing = props.playing,
      fulls = props.fulls,
      exitFullScreen = props.exitFullScreen,
      enterFullScreen = props.enterFullScreen,
      more = props.more,
      pp = props.pp,
      minusp = props.minusp,
      addp = props.addp,
      mm = props.mm;
  var div = ref.div,
      vdiv = ref.vdiv;
  return /*#__PURE__*/React.createElement("div", {
    className: "video-react-lower-bar_dhhiahhbhhbhb3767d7637____u"
  }, /*#__PURE__*/React.createElement("div", {
    className: "hundred tooltip"
  }, /*#__PURE__*/React.createElement("div", {
    className: "progress-video-react",
    ref: div,
    onMouseMove: function onMouseMove(e) {
      _onMouseMove(e);
    },
    onClick: onSeek
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      left: "".concat(ofwidth, "%")
    },
    className: "tooltiptext"
  }, ctt), /*#__PURE__*/React.createElement("div", {
    className: "finnished",
    style: video.current ? {
      width: "".concat(video.current.currentTime / video.current.duration * 100, "%"),
      background: props.primaryColor ? props.primaryColor : ''
    } : {
      width: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "point"
  })))), /*#__PURE__*/React.createElement("div", {
    className: "time-stamps"
  }, /*#__PURE__*/React.createElement("div", {
    className: "current"
  }, ct), /*#__PURE__*/React.createElement("div", {
    className: "fullstime"
  }, video.current ? calcTime(video.current.duration) : /*#__PURE__*/React.createElement(React.Fragment, null, "--:--"))), /*#__PURE__*/React.createElement("div", {
    className: "video-react-controls"
  }, playing ? /*#__PURE__*/React.createElement(Tooltip, {
    title: "Pause",
    "aria-label": "add",
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "video-react-pause",
    onClick: pause
  }, /*#__PURE__*/React.createElement(MdPause, null))) : /*#__PURE__*/React.createElement(Tooltip, {
    title: "Play",
    "aria-label": "add",
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "video-react-play",
    onClick: play
  }, /*#__PURE__*/React.createElement(MdPlayArrow, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: "Rewind",
    "aria-label": "add",
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "video-react-rewind",
    onClick: rewind
  }, /*#__PURE__*/React.createElement(MdFastRewind, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: "Forward",
    "aria-label": "add",
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "video-react-forward",
    onClick: foward
  }, /*#__PURE__*/React.createElement(MdFastForward, null))), /*#__PURE__*/React.createElement("div", {
    className: "video-react-pro"
  }), /*#__PURE__*/React.createElement("div", {
    className: "video-react-pro"
  }), /*#__PURE__*/React.createElement(Tooltip, {
    title: "Volume",
    "aria-label": "add",
    placement: "top"
  }, /*#__PURE__*/React.createElement("div", {
    className: "video-react-volume"
  }, /*#__PURE__*/React.createElement("div", {
    className: "volume-add"
  }, /*#__PURE__*/React.createElement("div", {
    className: "volume-div",
    ref: vdiv,
    onClick: va
  }, /*#__PURE__*/React.createElement("div", {
    className: "finnished",
    style: video.current ? {
      width: "".concat(video.current.volume / 1 * 100, "%")
    } : {
      width: 0
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "point"
  }))), video.current ? /*#__PURE__*/React.createElement(React.Fragment, null, video.current.volume === 0 ? /*#__PURE__*/React.createElement(MdVolumeOff, {
    onClick: Mute
  }) : /*#__PURE__*/React.createElement(React.Fragment, null, video.current.volume < 0.3 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeMute, {
    onClick: Mute
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, video.current.volume < 0.7 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeDown, {
    onClick: Mute
  })) : /*#__PURE__*/React.createElement(MdVolumeUp, {
    onClick: Mute
  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MdVolumeUp, null)))), /*#__PURE__*/React.createElement(Tooltip, {
    title: "Fullscreen",
    "aria-label": "add",
    placement: "top"
  }, fulls ? /*#__PURE__*/React.createElement("div", {
    className: "video-react-fullscreen",
    onClick: exitFullScreen
  }, /*#__PURE__*/React.createElement(MdFullscreenExit, null)) : /*#__PURE__*/React.createElement("div", {
    className: "video-react-fullscreen",
    onClick: enterFullScreen
  }, /*#__PURE__*/React.createElement(MdFullscreen, null))), /*#__PURE__*/React.createElement(Tooltip, {
    arrow: true,
    title: "Settings",
    "aria-label": "add",
    placement: "left"
  }, /*#__PURE__*/React.createElement("div", {
    className: "video-react-more"
  }, /*#__PURE__*/React.createElement("div", {
    style: more ? {
      transform: 'scale(1)',
      opacity: 1
    } : {},
    className: "video-react-menu"
  }, /*#__PURE__*/React.createElement("a", {
    download: "video",
    href: props.src,
    className: "list-",
    onClick: pp
  }, /*#__PURE__*/React.createElement("span", {
    className: "icon"
  }, /*#__PURE__*/React.createElement(MdFileDownload, null)), /*#__PURE__*/React.createElement("span", {
    className: "text"
  }, "Download")), /*#__PURE__*/React.createElement("div", {
    className: "list-",
    onClick: pp
  }, /*#__PURE__*/React.createElement("span", {
    className: "icon"
  }, /*#__PURE__*/React.createElement(MdPictureInPictureAlt, null)), /*#__PURE__*/React.createElement("span", {
    className: "text"
  }, "Picture In Picture")), /*#__PURE__*/React.createElement(Tooltip, {
    arrow: true,
    title: "Playback speed",
    "aria-label": "add",
    placement: "left"
  }, /*#__PURE__*/React.createElement("div", {
    className: "list-1"
  }, /*#__PURE__*/React.createElement("span", {
    className: "icon",
    onClick: minusp,
    style: video.current ? video.current.playbackRate === 0 ? {
      cursor: 'not-allowed'
    } : {} : {}
  }, /*#__PURE__*/React.createElement(MdRemove, null)), /*#__PURE__*/React.createElement("span", {
    className: "text"
  }, video.current ? video.current.playbackRate : 1), /*#__PURE__*/React.createElement("span", {
    className: "icon",
    onClick: addp
  }, /*#__PURE__*/React.createElement(MdAdd, null))))), /*#__PURE__*/React.createElement(MdSettings, {
    style: more ? {
      transform: 'rotate(40deg)',
      transition: 'all 0.2s'
    } : {
      transition: 'all 0.2s'
    },
    onContextMenu: function onContextMenu(e) {
      e.preventDefault();
    },
    onClick: mm
  })))));
})

ControlsBar = React.forwardRef((props, ref) => {
    const { video, ctt, onMouseMove, ofwidth, onSeek, ct, calcTime, pause, play, rewind, foward, va, Mute, playing, fulls,
        exitFullScreen,
        enterFullScreen,
        more,
        pp,
        minusp,
        addp,
        mm } = props
    const { div, vdiv } = ref
    return (
        <div className="video-react-lower-bar_dhhiahhbhhbhb3767d7637____u">

            <div className="hundred tooltip"><div className="progress-video-react" ref={div} onMouseMove={(e) => {
                onMouseMove(e)
            }} onClick={onSeek} >
                <span style={{ left: `${ofwidth}%` }} className="tooltiptext">{ctt}</span>
                <div
                    className="finnished"
                    style={video.current ? { width: `${(video.current.currentTime / video.current.duration) * 100}%`, background: props.primaryColor ? props.primaryColor : '' } : { width: 0 }} >
                    <div className="point"></div>
                </div>

            </div>
            </div>
            <div className="time-stamps">
                <div className="current">{ct}</div>
                <div className="fullstime">
                    {video.current ? calcTime(video.current.duration) : <>--:--</>}
                </div>
            </div>
            <div className="video-react-controls">
                {playing ? <Tooltip title="Pause" aria-label="add" placement="top" >
                    <div className="video-react-pause" onClick={pause}>
                        <MdPause />
                    </div>
                </Tooltip> :
                    <Tooltip title="Play" aria-label="add" placement="top" >
                        <div className="video-react-play" onClick={play}>
                            <MdPlayArrow />
                        </div>
                    </Tooltip>
                }
                <Tooltip title="Rewind" aria-label="add" placement="top" >
                    <div className="video-react-rewind" onClick={rewind}>
                        <MdFastRewind />
                    </div>
                </Tooltip>
                <Tooltip title="Forward" aria-label="add" placement="top" >
                    <div className="video-react-forward" onClick={foward}>
                        <MdFastForward />
                    </div>
                </Tooltip>
                <div className="video-react-pro"></div>
                <div className="video-react-pro"></div>
                <Tooltip title="Volume" aria-label="add" placement="top" >
                    <div className="video-react-volume"><div className="volume-add">

                        <div className="volume-div" ref={vdiv} onClick={va} >
                            <div className="finnished" style={video.current ? { width: `${(video.current.volume / 1) * 100}%` } : { width: 0 }}>

                            </div>
                            <div className="point"></div>
                        </div>
                    </div>
                        {video.current ? <>
                            {
                                video.current.volume === 0 ?
                                    <MdVolumeOff onClick={Mute} /> :
                                    <>
                                        {video.current.volume < 0.3 ? <><MdVolumeMute onClick={Mute} /></> :
                                            <>{video.current.volume < 0.7 ? <><MdVolumeDown onClick={Mute} /></> :
                                                <MdVolumeUp onClick={Mute} />}</>
                                        }</>
                            }</> : <><MdVolumeUp /></>}
                    </div>
                </Tooltip>
                <Tooltip title="Fullscreen" aria-label="add" placement="top" >
                    {fulls ? <div className="video-react-fullscreen" onClick={exitFullScreen}>
                        <MdFullscreenExit />
                    </div> : <div className="video-react-fullscreen" onClick={enterFullScreen}>
                        <MdFullscreen />
                    </div>}
                </Tooltip>

                <Tooltip arrow title="Settings" aria-label="add" placement="left" ><div className="video-react-more" >

                    <div style={more ? {
                        transform: 'scale(1)',
                        opacity: 1
                    } : {}} className="video-react-menu">

                        <a download='video' href={props.src} className="list-" onClick={pp} >
                            <span className="icon"><MdFileDownload /></span>
                            <span className="text">Download</span>
                        </a>
                        <div className="list-" onClick={pp} >
                            <span className="icon"><MdPictureInPictureAlt /></span>
                            <span className="text">Picture In Picture</span>
                        </div>
                        <Tooltip arrow title="Playback speed" aria-label="add" placement="left" ><div className="list-1">
                            <span className="icon" onClick={minusp} style={video.current ? video.current.playbackRate === 0 ?
                                { cursor: 'not-allowed' } : {} : {}
                            }>
                                <MdRemove />
                            </span>
                            <span className="text">{video.current ? video.current.playbackRate : 1}</span>
                            <span className="icon" onClick={addp}  ><MdAdd /></span>
                        </div>
                        </Tooltip>
                    </div>
                    <MdSettings style={more ? { transform: 'rotate(40deg)', transition: 'all 0.2s' } : { transition: 'all 0.2s' }} onContextMenu={(e) => {
                        e.preventDefault()
                    }} onClick={mm} />
                </div>
                </Tooltip>

            </div>
        </div>
    )
})

export default function FabPage() {
  const isPreview = document.location.href.includes('examplePreview');
  const theme = useTheme();
  const PlusIcon = theme === 'ios' ? Plus : MdAdd;

  return (
    <Page>
      <Navbar
        title="FAB"
        left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
      />

      {/* Right Top */}
      <Fab
        className="fixed right-4-safe ios:top-15-safe material:top-18-safe z-20"
        colors={{ bg: 'bg-red-500', activeBg: 'active:bg-red-600' }}
        icon={<PlusIcon />}
      />

      {/* Right Bottom */}
      <Fab
        className="fixed right-4-safe bottom-4-safe z-20"
        icon={<PlusIcon />}
      />

      {/* Left Bottom */}
      <Fab
        className="fixed left-4-safe bottom-4-safe z-20"
        icon={<PlusIcon />}
        colors={{ bg: 'bg-green-500', activeBg: 'active:bg-green-600' }}
      />

      {/* Left Top */}
      <Fab
        className="fixed left-4-safe ios:top-15-safe material:top-18-safe z-20"
        colors={{ bg: 'bg-yellow-500', activeBg: 'active:bg-yellow-600' }}
        icon={<PlusIcon />}
      />

      {/* Center Center */}
      <Fab
        className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20"
        colors={{ bg: 'bg-pink-500', activeBg: 'active:bg-pink-600' }}
        icon={<PlusIcon />}
      />

      {/* Center Bottom */}
      <Fab
        className="fixed left-1/2 bottom-4-safe transform -translate-x-1/2 z-20"
        icon={<PlusIcon />}
        text="Create"
        textPosition="after"
      />

      <Block className="space-y-4">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo
          rem beatae, delectus eligendi est saepe molestias perferendis
          suscipit, commodi labore ipsa non quasi eum magnam neque ducimus!
          Quasi, numquam.
        </p>
        <p>
          Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a,
          quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores
          ipsa, mollitia perferendis consectetur quam eaque, voluptate
          laboriosam unde.
        </p>
        <p>
          Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam,
          exercitationem dolores odio sapiente provident. Accusantium id, itaque
          aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem
          sequi facere quas quidem magnam reprehenderit.
        </p>
        <p>
          Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi
          consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae
          facere voluptates atque similique odit mollitia, rerum placeat nobis
          est.
        </p>
        <p>
          Et impedit soluta minus a autem adipisci cupiditate eius dignissimos
          nihil officia dolore voluptatibus aperiam reprehenderit esse facilis
          labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio
          assumenda veniam, ipsum alias.
        </p>
      </Block>
      <Block className="space-y-4">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa
          debitis sed nihil eaque dolore cum iste quibusdam, accusamus
          doloribus, tempora quia quos voluptatibus corporis officia at quas
          dolorem earum!
        </p>
        <p>
          Quod soluta eos inventore magnam suscipit enim at hic in maiores
          temporibus pariatur tempora minima blanditiis vero autem est
          perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut
          odit aliquam adipisci.
        </p>
        <p>
          Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam
          aperiam, animi fuga veritatis consectetur, voluptatibus atque
          consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci
          sint, iusto blanditiis ullam? Vel?
        </p>
        <p>
          Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis
          temporibus consequatur expedita eaque aliquid quos accusamus fugiat id
          iusto autem obcaecati repellat fugit cupiditate suscipit natus quas
          doloribus? Temporibus necessitatibus, libero.
        </p>
        <p>
          Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae
          obcaecati possimus, labore excepturi reprehenderit consectetur
          perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur
          in eveniet, deleniti recusandae omnis eum quas?
        </p>
        <p>
          Quos nulla consequatur quo, officia quaerat. Nulla voluptatum,
          assumenda quibusdam, placeat cum aut illo deleniti dolores commodi
          odio ipsam, recusandae est pariatur veniam repudiandae blanditiis.
          Voluptas unde deleniti quisquam, nobis?
        </p>
        <p>
          Atque qui quaerat quasi officia molestiae, molestias totam incidunt
          reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam
          obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum
          esse recusandae voluptatibus eligendi.
        </p>
      </Block>
    </Page>
  );
}