react-icons/md#MdAdd JavaScript Examples
The following examples show how to use
react-icons/md#MdAdd.
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: index.js From react-sample-projects with MIT License | 6 votes |
|
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>
);
}
Example #2
| Source File: Contacts.js From ReactJS-Projects with MIT License | 5 votes |
|
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>
);
}
Example #3
| Source File: video.esm.js From reactjs-media with MIT License | 4 votes |
|
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
})))));
})
Example #4
| Source File: Components.jsx From reactjs-media with MIT License | 4 votes |
|
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>
)
})
Example #5
| Source File: Fab.jsx From konsta with MIT License | 4 votes |
|
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>
);
}
