@fortawesome/free-solid-svg-icons#faArrowLeft JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faArrowLeft.
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: Go.jsx From monopoly with GNU General Public License v3.0 | 6 votes |
|
render() {
return (<div className={"go corner-card grid-area-0 " + this.props.boardPos}>
<div className="container">
<div>Collect $200 salary as you pass</div>
<div>GO</div>
<div className="icon">
<FontAwesomeIcon icon={faArrowLeft}/>
</div>
</div>
</div>);
}
Example #2
| Source File: App.js From lrc-staking-dapp with MIT License | 6 votes |
|
library.add( far, fas, faBookReader, faArrowLeft, faArrowRight, faQuestionCircle, faCopy, faSignOutAlt, faEdit, faAngleDown, faExternalLinkAlt, fab, faEthereum, faTwitter, faDiscord, faUnlink, faSearch, faFortAwesome, faExchangeAlt, faChartPie, faGlobe, faDonate, faDollarSign, );
Example #3
| Source File: ImageMapContents.jsx From jitsi-party with MIT License | 6 votes |
|
function displayItem(props, item, returnFunc) {
return (
<div className="imagemap-modal">
<div className="header">
<button onClick={returnFunc}>
<FontAwesomeIcon icon={faArrowLeft}/>
</button>
<b>{item.title}</b>
<button onClick={props.handleClose}>
<FontAwesomeIcon icon={faTimes}/>
</button>
</div>
<div className="contents">
<PDFObject url={item.path} />
</div>
</div>
)
}
Example #4
| Source File: ResetPassword.js From Next.js-e-commerce-online-store with MIT License | 6 votes |
|
export default function ResetPassword({ hideResetPassword }) {
return (
<DivResetPassword className="border-left border-bottom border-right">
<button className="btn btn-light" onClick={hideResetPassword}>
<FontAwesomeIcon icon={faArrowLeft} width="1em" /> Go back
</button>
<form onSubmit={() => alert('We\'ve sent your new password to you.')}>
<label>
Email:
<input type="email" required />
</label>
<button type="submit">
{" "}Reset Password{" "}
</button>
</form>
</DivResetPassword>
)
}
Example #5
| Source File: myBlog.component.js From blogApp with MIT License | 6 votes |
|
render() {
return (
<div>
<div className='row mr-auto ml-3 mb-1 mt-1'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
<div
className='row pt-4 justify-content-center'
style={{
marginLeft: "5vw",
width: "90vw",
}}>
{this.state.blogs ? (
<Blogs blogs={this.state.blogs} />
) : (
<div className='btn btn-lg btn-danger'>
404 : No Blogs Found
</div>
)}
</div>
</div>
);
}
Example #6
| Source File: Confirmation.js From commercejs-react-checkout with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
library.add(faArrowLeft);
Example #7
| Source File: step3.js From amazon-next with MIT License | 5 votes |
|
export default function CheckoutSecondStep() {
const dispatch = useDispatch();
const initialData = useSelector(state => state.checkout);
const [formSubmit, setSubmitForm] = useState(false);
const stepInfo = { order: 3, title: 'Payment' };
function handleSubmit(data) {
setSubmitForm(true);
return dispatch(submitStepRequest({ ...data }, 'success'));
}
return (
<ApplicationLayout className="lg:pr-0 lg:py-0">
<CheckoutLayout step={stepInfo}>
<Progress
width={`${stepInfo.order * 25}%`}
order={stepInfo.order}
/>
{/* TODO -> initialData from Redux Store */}
<Form
onSubmit={handleSubmit}
schema={paymentSchema}
initialData={initialData}
className="flex flex-col justify-center"
>
<div className="flex flex-col bg-white py-2 pr-2 mt-5 relative">
<Scope path="payment">
<FormGroup
name="card"
label="Card"
submitted={formSubmit}
/>
<FormGroup
name="method"
label="Method"
submitted={formSubmit}
/>
<FormGroup
name="number"
label="Number"
submitted={formSubmit}
/>
</Scope>
<Button
type="submit"
className="lg:w-1/2 w-full px-2 py-3 mt-5"
>
Next
</Button>
<Link href="/checkout/step2">
<div className="mt-3 transition-colors cursor-pointer duration-300 flex flex-row items-center text-gray-500 hover:text-gray-600">
<FontAwesomeIcon
icon={faArrowLeft}
size="lg"
className="items-center mr-2"
/>
<span className="text-xl">Back</span>
</div>
</Link>
</div>
</Form>
</CheckoutLayout>
</ApplicationLayout>
);
}
Example #8
| Source File: step2.js From amazon-next with MIT License | 5 votes |
|
export default function CheckoutSecondStep() {
const dispatch = useDispatch();
const initialData = useSelector(state => state.checkout);
const [formSubmit, setSubmitForm] = useState(false);
const stepInfo = { order: 2, title: 'Shipping Info' };
function handleSubmit(data) {
setSubmitForm(true);
return dispatch(submitStepRequest({ ...data }, 'step3'));
}
return (
<ApplicationLayout className="lg:pr-0 lg:py-0">
<CheckoutLayout step={stepInfo}>
<Progress
width={`${stepInfo.order * 25}%`}
order={stepInfo.order}
/>
<Form
onSubmit={handleSubmit}
schema={addressSchema}
initialData={initialData}
className="flex flex-col justify-center"
>
<div className="flex flex-col bg-white py-2 pr-2 mt-5 relative">
<Scope path="address">
<FormGroup
name="street"
label="Street"
submitted={formSubmit}
/>
<FormGroup
name="zipcode"
label="Zipcode"
submitted={formSubmit}
/>
<FormGroup
name="district"
label="District"
submitted={formSubmit}
/>
<FormGroup
name="state"
label="State"
submitted={formSubmit}
/>
</Scope>
<Button
type="submit"
className="lg:w-1/2 w-full px-2 py-3 mt-5"
>
Next
</Button>
<Link href="/checkout/step1">
<div className="mt-3 transition-colors cursor-pointer duration-300 flex flex-row items-center text-gray-500 hover:text-gray-600">
<FontAwesomeIcon
icon={faArrowLeft}
size="lg"
className="items-center mr-2"
/>
<span className="text-xl">Back</span>
</div>
</Link>
</div>
</Form>
</CheckoutLayout>
</ApplicationLayout>
);
}
Example #9
| Source File: index.js From Webiu with MIT License | 5 votes |
|
Carousel = ({data, header}) => {
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const previousSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === 0;
const index = shouldResetIndex ? lastIndex : currentImageIndex - 1;
setCurrentImageIndex(index);
}
const nextSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === lastIndex;
const index = shouldResetIndex ? 0 : currentImageIndex + 1;
setCurrentImageIndex(index);
}
const ImageSlide = ({ url }) => {
return (
<div className="image-slide">
<div className="slider-image-div">
<img className="slider-image" src={url.image} alt="slider-logo" />
</div>
<div className="slider-title">
<h4>{url.title}</h4><hr />
</div>
<div className="slider-content">
<p>{url.content}</p>
</div>
</div>
);
}
return (
<div>
{header ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faSlidersH} /> {header}</h2>
</div> : null}
<Container>
{data ? <div className="carousel">
<FontAwesomeIcon className="icon icon-left" icon={faArrowLeft} onClick={previousSlide} />
<ImageSlide url={ data[currentImageIndex] } />
<FontAwesomeIcon className="icon icon-right" icon={faArrowRight} onClick={nextSlide} />
</div> : null}
</Container>
</div>
);
}
Example #10
| Source File: index.js From Webiu with MIT License | 5 votes |
|
Testimonial = ({data, header}) => {
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const previousSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === 0;
const index = shouldResetIndex ? lastIndex : currentImageIndex - 1;
setCurrentImageIndex(index);
}
const nextSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === lastIndex;
const index = shouldResetIndex ? 0 : currentImageIndex + 1;
setCurrentImageIndex(index);
}
const ImageSlide = ({ url }) => {
return (
<div>
<div className="pn_testimonial_box">
<p className="test-description text-justify">{url.description}</p>
<div className="row">
<div className="col-md-6 pn_review_profile">
<img src={url.image} className="border-radius-12 float-right" alt="client" />
<span className="test-user">{url.name}</span>
</div>
<div className="col-md-6 pn_review_rating d-flex justify-content-end">
5
<img className="image-radius aligncenter"
src="https://desklib.com/static/src/assets/images/v2/star_rating.svg"
alt="client-stars" />
</div>
</div>
</div>
</div>
);
}
return (
<div>
{header ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faComments} /> {header}</h2>
</div> : null}
<Container>
{data ? <div className="carousel">
<FontAwesomeIcon className="icon icon-left" icon={faArrowLeft} onClick={previousSlide} />
<ImageSlide url={ data[currentImageIndex] } />
<FontAwesomeIcon className="icon icon-right" icon={faArrowRight} onClick={nextSlide} />
</div> : null}
</Container>
</div>
);
}
Example #11
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #12
| Source File: details.js From amazon-next with MIT License | 4 votes |
|
export default function Details({ product, error }) {
const dispatch = useDispatch();
const isSelected = useSelector(state =>
state.cart.products.find(
selectedProduct => selectedProduct.id === product.id
)
);
const stars = useMemo(() => {
const initial = [];
for (let i = 1; i < product.stars; i += 1) {
initial.push(
<FontAwesomeIcon
key={i}
size="lg"
className="w-5"
icon={faStar}
color="#e69d3f"
/>
);
}
return initial;
}, [product.stars]);
const liked = useSelector(state =>
state.user.likedProducts.find(
likedProduct => likedProduct.id === product.id
)
);
function handleCart() {
if (isSelected) return dispatch(removeFromCartRequest(product.id));
return dispatch(addToCartRequest(product));
}
function handleLike() {
dispatch(likeProductRequest(product));
}
return (
<Layout>
<motion.div
className={`product-details h-screen px-12 py-8 flex flex-col ${error &&
'justify-center items-center'}`}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
{error ? (
<span className="text-xl text-center">
{' '}
<FontAwesomeIcon
icon={faExclamationTriangle}
color="red"
/>{' '}
There was an error while consulting the products{' '}
</span>
) : (
<motion.div className="flex flex-col lg:grid grid-cols-2 h-full py-12 lg:py-0">
<div className="h-full flex flex-col">
<Link href="/">
<div className="cursor-pointer transition-shadows duration-300 hover:shadow shadow-lg mb-5 lg:mb-0 rounded-full text-gray-500 w-12 h-12 flex items-center justify-center p-8">
<FontAwesomeIcon
icon={faArrowLeft}
size="lg"
/>
</div>
</Link>
<motion.img
src={product.image}
alt={product.name}
aria-label={product.name}
title={product.name}
initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -40 }}
transition={{ delay: 0.2 }}
className="lg:my-12 mx-0 h-300 max-w-480 self-center"
/>
</div>
<motion.div
variants={stagger}
className="h-full flex flex-col justify-between pr-8"
>
<motion.header
initial="fadeup"
animate="normal"
exit="exit"
>
<motion.h1
variants={fadeUp}
className="text-2xl mb-2 text-gray-800 font-bold"
>
{product.name}
</motion.h1>
<motion.div
variants={fadeUp}
className="flex flex-row"
>
{stars}{' '}
<span className="ml-2 font-light text-yellow-burn">
1540 reviews
</span>
</motion.div>
<motion.p
variants={fadeUp}
className="text-md text-gray-500 mt-8"
>
<DangerousHTML html={product.description} />
</motion.p>
</motion.header>
<motion.footer
variants={fadeUp}
initial="fadeup"
animate="normal"
exit="exit"
className="flex flex-col lg:flex-row w-full justify-between pt-5 pb-8"
>
<div className="flex flex-col">
<span className="text-gray-500">
Best price
</span>
<strong className="text-3xl text-gray-800">
${product.price / 100}
</strong>
</div>
<div className="flex flex-row items-center mt-5 lg:mt-0">
<Button
className="font-bold text-xl px-12 flex items-center justify-center lg:w-300 box-border"
title="Add to cart"
handleClick={handleCart}
>
{' '}
{isSelected
? 'Remove from cart'
: 'Add to cart'}
</Button>
<motion.button
className="ml-5 border-none bg-none outline-none"
type="button"
title="Save to my list"
onClick={handleLike}
whileTap={{ y: -10 }}
>
{liked ? (
<FontAwesomeIcon
size="lg"
icon={faHeart}
className="text-blue-500 hover:text-blue-600 transition-colors duration-500"
/>
) : (
<FontAwesomeIcon
size="lg"
icon={faHeartRegular}
className="text-blue-500 hover:text-blue-600 transition-colors duration-500"
/>
)}
</motion.button>
</div>
</motion.footer>
</motion.div>
</motion.div>
)}
</motion.div>
</Layout>
);
}
Example #13
| Source File: Navigation.jsx From jitsi-party with MIT License | 4 votes |
|
render() {
const onClick = this.props.onClick;
const { north, south, east, west } = this.props.directions || {};
const mapButtonClass = this.props.showMapTooltip
? "map-button animated"
: "map-button";
const pokeButtonClass = this.state.showPokeOptions
? "poke-button focused"
: "poke-button";
const room = this.props.currentRoom.room;
const audio = this.props.rooms[room].audio;
const roomType = this.props.rooms[room].type;
const events = this.props.events;
const users = _.flatten(Object.values(this.props.users));
const handleClickMap = () => this.props.handleOpenModal("map");
const handleClickEvents = () => this.props.handleOpenModal("events");
const handleClickEmail = () => this.props.handleOpenModal("email");
return (
<div className="navigation-container">
<div className="column settings-container">
<div className="map-button-container">
{this.props.showMapButton && !this.props.hideSettings && (
<button
className={mapButtonClass}
title={Config.tooltips.map}
disabled={false}
onClick={handleClickMap}
>
<FontAwesomeIcon icon={faMap} />
</button>
)}
{/* {this.props.showMapTooltip &&
<div className="map-tooltip">you have unlocked the party map!</div>
} */}
</div>
<div className="events-button-container">
{events && events.length > 0 && !this.props.hideSettings && (
<button
className="events-button"
title={Config.tooltips.events}
onClick={handleClickEvents}
>
<FontAwesomeIcon icon={faCalendar} />
</button>
)}
</div>
<div className="email-button-container">
{Config.moderation &&
!_.isEmpty(Config.moderation.moderatorEmails) && (
<button
className="email-button"
title={Config.tooltips.moderator}
onClick={handleClickEmail}
>
<FontAwesomeIcon icon={faEnvelope} />
</button>
)}
</div>
{roomType.toUpperCase() === "CHATSTREAM" &&
this.props.currentRoom.entered &&
!this.props.hideSettings ? (
<div className="chat-button-container">
<button
className={mapButtonClass}
title={Config.tooltips.chat}
disabled={false}
onClick={() =>
this.setState({ hideChat: !this.state.hideChat })
}
>
<FontAwesomeIcon icon={faCommentAlt} />
</button>
</div>
) : null}
<div className="poke-button-container">
{Config.poke &&
this.props.isPokingUnlocked &&
!this.props.hideSettings && (
<button
className={pokeButtonClass}
title={Config.tooltips.poke}
onClick={this.handleClickPokeButton.bind(this)}
>
<FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
</button>
)}
{this.state.showPokeOptions && (
<PokeOptions
users={users}
handlePoke={this.handlePoke.bind(this)}
/>
)}
</div>
<div className="audio-button-container">
{audio && (
<AudioPlayer
src={audio.path}
autoPlay={audio.autoPlay}
hide={audio.hideControls}
onChange={this.handleAudioChanged.bind(this)}
></AudioPlayer>
)}
</div>
</div>
<div className="column">
<button
className="west"
disabled={!west}
onClick={() => onClick(west)}
>
<FontAwesomeIcon icon={faArrowLeft} />
<span className="navigation-room-name">
{_.get(this.props.rooms[west], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="north"
disabled={!north}
onClick={() => onClick(north)}
>
<FontAwesomeIcon icon={faArrowUp} />
<span className="navigation-room-name">
{_.get(this.props.rooms[north], "name")}
</span>
</button>
<button
className="south"
disabled={!south}
onClick={() => onClick(south)}
>
<FontAwesomeIcon icon={faArrowDown} />
<span className="navigation-room-name">
{_.get(this.props.rooms[south], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="east"
disabled={!east}
onClick={() => onClick(east)}
>
<FontAwesomeIcon icon={faArrowRight} />
<span className="navigation-room-name">
{_.get(this.props.rooms[east], "name")}
</span>
</button>
</div>
<div className="column column-avatar">
<div className="puck-wrapper">
<img
src={
Config.avatars[this.props.user.avatar.type].images[
this.props.user.avatar.color
]
}
/>
</div>
</div>
</div>
);
}
Example #14
| Source File: LibraryBlockPage.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 4 votes |
|
renderContent() {
const {
errorMessage,
intl,
metadata,
} = this.props;
const { blockId, libraryId } = this.props.match.params;
const hasChanges = metadata ? metadata.has_unpublished_changes : false;
return (
<div className="library-block-wrapper">
<div className="wrapper-mast wrapper">
<header className="mast has-actions has-navigation has-subtitle">
<div className="page-header">
<Button href={ROUTES.Detail.HOME_SLUG(libraryId)} className="my-1">
<FontAwesomeIcon icon={faArrowLeft} className="pr-1" />
{intl.formatMessage(messages['library.block.page.back_to_library'])}
</Button>
<small className="subtitle">{intl.formatMessage(messages['library.block.page.heading'])}</small>
<h1 className="page-header-title">{metadata !== null && metadata.display_name}</h1>
</div>
</header>
</div>
<div className="wrapper-content wrapper">
<section className="content">
<article className="content-primary" role="main">
{errorMessage
&& (
<Alert
variant="danger"
onClose={this.handleDismissAlert}
dismissible
>
{truncateMessage(errorMessage)}
</Alert>
)}
<div className="card">
<div className="card-header">
<ul className="nav nav-tabs card-header-tabs">
<li className="nav-item">
<NavLink exact to={ROUTES.Block.HOME_SLUG(libraryId, blockId)} className="nav-link" activeClassName="active">View</NavLink>
</li>
<li className="nav-item">
{this.isEditable
? <NavLink to={ROUTES.Block.EDIT_SLUG(libraryId, blockId)} className="nav-link" activeClassName="active">Edit</NavLink>
: <span className="nav-link">Edit</span>}
</li>
<li className="nav-item">
<NavLink to={ROUTES.Block.ASSETS_SLUG(libraryId, blockId)} className="nav-link" activeClassName="active">Assets</NavLink>
</li>
<li className="nav-item">
<NavLink to={ROUTES.Block.SOURCE_SLUG(libraryId, blockId)} className="nav-link" activeClassName="active">Source</NavLink>
</li>
<li className="nav-item">
<NavLink to={ROUTES.Block.LEARN_SLUG(libraryId, blockId)} className="nav-link" activeClassName="active">Learn</NavLink>
</li>
</ul>
</div>
<div className="card-body">
{ this.props.view.status === LOADING_STATUS.LOADING ? (
<div
className="d-flex justify-content-center align-items-center flex-column"
style={{ height: '400px' }}
>
<Spinner animation="border" variant="primary" />
</div>
) : (
<Switch>
<Route exact path={ROUTES.Block.HOME}>
<LibraryBlock
view={this.props.view}
getHandlerUrl={this.getHandlerUrl}
/>
</Route>
<Route exact path={ROUTES.Block.EDIT}>
<LibraryBlock
view={this.props.view}
getHandlerUrl={this.getHandlerUrl}
onBlockNotification={this.handleBlockNotification}
/>
</Route>
<Route exact path={ROUTES.Block.ASSETS}>
<LibraryBlockAssets
assets={this.props.assets}
onDropFiles={this.handleDropFiles}
onDeleteFile={this.handleDeleteFile}
/>
</Route>
<Route exact path={ROUTES.Block.SOURCE}>
<LibraryBlockOlx
olx={this.props.olx}
onSaveOlx={this.handleSaveOlx}
/>
</Route>
<Route exact path={ROUTES.Block.LEARN}>
<p>
This tab uses the LMS APIs so it shows the published version only and will save user state.
</p>
<LibraryBlock
view={this.props.view}
getHandlerUrl={this.getHandlerUrl}
/>
</Route>
</Switch>
)}
</div>
</div>
</article>
<aside className="content-supplementary">
<div className="bit">
<h3 className="title title-3">{intl.formatMessage(messages['library.block.aside.title'])}</h3>
<p>{intl.formatMessage(messages['library.block.aside.text.1'])}</p>
<ul className="list-actions">
<li className="action-item">
<a
href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html"
rel="noopener noreferrer"
target="_blank"
>
{intl.formatMessage(messages['library.block.aside.help.link'])}
</a>
</li>
</ul>
</div>
<div id="publish-unit" className="window">
<div className={`bit-publishing ${hasChanges && 'has-warnings'}`}>
<h3 className="bar-mod-title pub-status">
{intl.formatMessage(messages[`library.block.aside.${hasChanges ? 'draft' : 'published'}`])}
</h3>
<div className="wrapper-pub-actions bar-mod-actions">
<ul className="action-list list-unstyled">
<li className="action-item">
<Button
variant="primary"
className="w-100 p-2 btn-lg"
onClick={this.handleCommitLibrary}
disabled={!hasChanges}
aria-disabled={!hasChanges}
>
<strong>{intl.formatMessage(messages['library.block.aside.publish'])}</strong>
</Button>
</li>
<li className="action-item text-right">
<Button
variant="link"
className="d-inline-block"
onClick={this.handleRevertLibrary}
disabled={!hasChanges}
aria-disabled={!hasChanges}
>
{intl.formatMessage(messages['library.block.aside.discard'])}
</Button>
</li>
<li className="action-item">
<Button
variant="danger"
className="w-100 p-2 btn-lg"
onClick={this.handleDeleteBlock}
>
<strong>{intl.formatMessage(messages['library.block.aside.delete'])}</strong>
</Button>
</li>
</ul>
</div>
</div>
</div>
</aside>
</section>
</div>
</div>
);
}
Example #15
| Source File: SwapTokenWidget.js From katanapools with GNU General Public License v2.0 | 4 votes |
|
render() {
const {tokenData} = this.props;
const {showTransaferSelect, selectedTransferToken, selectedReceiveToken, showReceiveSelect,
transferAmount, receiveAmount, totalFee, pathMeta, transactionFee, widgetError
} = this.state;
let transferFromTokenSelect = <span/>;
let receiveToTokenSelect = <span/>;
if (showTransaferSelect) {
transferFromTokenSelect =
(<div className="token-select-dropdown">
<TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.transferSelectChanged}/>
</div>
)
}
if (showReceiveSelect) {
receiveToTokenSelect = (
<div className="token-select-dropdown">
<TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.receiveSelectChanged}/>
</div>
)
}
if (tokenData.length === 0 || selectedTransferToken === undefined || selectedReceiveToken === undefined) {
return (
<div className="swap-token--loading-container">
<div className="spinner-icon">
<FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
</div>
</div>);
}
let pathMetaData = <span/>;
if (pathMeta && pathMeta.length > 0) {
pathMetaData = pathMeta.map(function(item, idx){
let pointerArrow = <span/>;
if (idx < pathMeta.length - 1) {
pointerArrow =
<div className="arrow-right-container">
<FontAwesomeIcon icon={faArrowRight} />
</div>
}
return (
<div className="meta-item-cell-container" key={idx}>
<div className="meta-item-cell">
<div className="token-label-cell">{item.meta.symbol}</div>
<div className="token-name-cell">{item.meta.name}</div>
</div>
{pointerArrow}
</div>)
})
}
let errorData = <span/>;
if (widgetError && widgetError.length > 0) {
errorData = <div className="error">{widgetError}</div>
}
return (
<div className="swap-token-container">
<div className="card">
<div className="text">
<Row>
<Col lg={5}>
<div className="h4 token-transfer-label">Transfer </div>
<div className="token-label-amount-container">
<Row>
<Col lg={4} className="token-label-select-col">
<div className="token-label-container" onClick={this.openTransferSelectDropdown}>
<img src={selectedTransferToken.imageURI} className="token-preview-image"/>
<div className="token-preview-text">{selectedTransferToken.symbol}</div>
<FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
</div>
{transferFromTokenSelect}
</Col>
<Col lg={8} className="token-amount-col">
<Form.Control size="sm" type="number" placeholder="Amount" onChange={this.transferAmountChanged} value={transferAmount}/>
</Col>
</Row>
</div>
</Col>
<Col lg={2}>
<div className="token-transfer-arrow-container">
<div>
<FontAwesomeIcon icon={faArrowLeft} className="arrow-container"/>
</div>
<div className="bottom-arrow-container arrow-container">
<FontAwesomeIcon icon={faArrowRight}/>
</div>
</div>
</Col>
<Col lg={5}>
<div className="h4 token-transfer-label">Receive</div>
<div className="token-label-amount-container">
<Row>
<Col lg={4} className="token-label-select-col">
<div className="token-label-container" onClick={this.openReceiveSelectDropdown}>
<img src={selectedReceiveToken.imageURI} className="token-preview-image"/>
<div className="token-preview-text">{selectedReceiveToken.symbol}</div>
<FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
</div>
{receiveToTokenSelect}
</Col>
<Col lg={8} className="token-amount-col">
<Form.Control size="sm" type="text" placeholder="Amount" value={receiveAmount}
onChange={this.receiveAmountChanged}/>
</Col>
</Row>
</div>
</Col>
</Row>
<Row className="swap-action-btn-container">
<Col lg={8}>
{errorData}
</Col>
<Col lg={3}>
Total Fees: {transactionFee} {selectedReceiveToken.symbol}
</Col>
<Col lg={1}>
<Button onClick={this.submitSwapTransaction}>Swap</Button>
</Col>
</Row>
<Row>
<Col lg={12} className="network-path-label">
Network path :
</Col>
<Col lg={12} className="network-path-data">
{pathMetaData}
</Col>
</Row>
</div>
</div>
</div>
)
}
Example #16
| Source File: index.jsx From 8086.js with MIT License | 4 votes |
|
export default function ButtonsContainer() {
const classes = useStyles();
const dispatch = useDispatch();
const code = useSelector(selectCode);
const emulatorState = useSelector(selectState);
const loadCode = () => {
emulator.loadCode(code);
};
const stepForwardClick = () => {
const len = emulatorState.registers.future.length;
if (len === 0) return;
dispatch(stepForward());
};
const stepBackClick = () => {
const len = emulatorState.registers.past.length;
if (len === 0) return;
dispatch(stepBack());
};
const runFromPointClick = () => {
Object.entries(emulatorState.registers.present)
.map((o) => {
const [k, v] = o;
if (
['H', 'L'].includes(k[1])
&& ['A', 'B', 'C', 'D'].includes(k[0])
) {
emulator.cpu.registers.regs[`${k[0]}X`].set(v, k[1]);
} else {
emulator.cpu.registers.regs[k].set(v);
}
return o;
});
Object.values(emulatorState.memory.present)
.map((v, i) => {
emulator.cpu.memory.set(i, v);
return v;
});
try {
loadCode();
emulator.cpu.step();
dispatch(executeStep({
registers: emulator.getRegisters(),
memory: emulator.getSerialisableMemory(),
}));
} catch (err) {
dispatch(raiseError({
name: err.name,
token: err.token,
message: err.message,
position: err.position,
lineNumber: err.lineNumber,
}));
}
};
const runAllClick = () => {
emulator.resetState();
dispatch(resetRegMemState());
// eslint-disable-next-line no-constant-condition
while (true) {
try {
loadCode();
emulator.cpu.step();
dispatch(executeStep({
registers: emulator.getRegisters(),
memory: emulator.getSerialisableMemory(),
}));
} catch (err) {
break;
}
}
};
const pastLength = emulatorState.registers.past.length;
const backClass = pastLength > 0 ? '' : classes.disabledIcon;
const futureLength = emulatorState.registers.future.length;
const forwardClass = futureLength > 0 ? '' : classes.disabledIcon;
return (
<div className={classes.buttonsContainer}>
<div className={classes.buttonWrapper}>
<button type="button" className={classes.button} onClick={stepBackClick}>
<sup className={classes.count}>{pastLength}</sup>
<FontAwesomeIcon icon={faArrowLeft} className={backClass} />
</button>
<button type="button" className={classes.button} onClick={runFromPointClick}>
<FontAwesomeIcon icon={faPlay} className={classes.playIcon} />
</button>
<button type="button" className={classes.button} onClick={stepForwardClick}>
<FontAwesomeIcon icon={faArrowRight} className={forwardClass} />
<sup className={classes.count}>{futureLength}</sup>
</button>
<button type="button" className={classes.button} onClick={runAllClick}>
<FontAwesomeIcon icon={faForward} />
</button>
</div>
</div>
);
}
Example #17
| Source File: cart.js From amazon-next with MIT License | 4 votes |
|
export default function CartPage() {
const dispatch = useDispatch();
const router = useRouter();
const [editShippingAddress, setEditShippingAddress] = useState(false);
const [streetName, setStreetName] = useState('');
const { products } = useSelector(state => state.cart);
const { street, district } = useSelector(state => state.checkout.address);
function handleSubmit() {
return router.push({ pathname: '/checkout/step1' });
}
function handleShippingAddress() {
setEditShippingAddress(!editShippingAddress);
if (editShippingAddress) {
return dispatch(
submitCheckoutValue({ address: { street: streetName } })
);
}
return true;
}
return (
<Layout style={{ padding: 0 }}>
<motion.div
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="w-full flex flex-col h-full lg:flex-row"
>
<motion.div
animate="animate"
initial="initial"
className="lg:w-2/3 w-full flex flex-col justify-between pt-8 pb-10 px-12"
>
<motion.div
variants={slide}
initial="initial"
animate="slidein"
className="flex flex-col"
>
<h1 className="font-bold text-3xl text-gray-500 mb-10">
Make Order
</h1>
<div className="flex flex-col lg:flex-row">
<img
src="/static/map.png"
alt="Map"
aria-label="Map"
className="rounded lg:mr-8 mr-0"
title="That's just a map for test (At least, for now)"
/>
<ul className="flex flex-col">
<li>
<span className="block text-gray-500">
Shipping Date
</span>
<span className="text-gray-800">
Tomorrow, 12AM - GPM
</span>
</li>
<li className="mt-5 flex flex-row items-end">
<div>
<span className="block text-gray-500">
Shipping Address
</span>
{editShippingAddress ? (
<input
className="bg-white text-gray-700 font-light w-200"
type="text"
placeholder="Type your street name"
onChange={e =>
setStreetName(
e.target.value
)
}
value={streetName}
/>
) : (
<span className="text-gray-800">
{!!street || !!district
? `${street} ${district &&
`, ${district}`}`
: 'No address registered'}
</span>
)}
</div>
<button
className="transition-colors duration-300 hover:text-blue-600 text-blue-500 outline-none border-none ml-4 font-bold border-none"
type="button"
onClick={handleShippingAddress}
>
{editShippingAddress ? 'Send' : 'Edit'}
</button>{' '}
</li>
<li className="mt-5">
<span className="block text-gray-500">
Delivery To
</span>
<div className="flex flex-row items-center mt-1">
<img
src="/static/user.jpg"
alt="User"
aria-label="User"
className="w-8 h-8 rounded-full"
/>
<strong className="ml-2 text-gray-800">
{' '}
Laura Beatris{' '}
</strong>
</div>
</li>
</ul>
</div>
</motion.div>
<motion.div
variants={slide}
initial="initial"
animate="slidein"
className="my-8 w-full flex flex-col lg:flex-row justify-between pr-5"
>
<div className="flex flex-col justify-start">
<span className="text-gray-600">Credit Card</span>
<strong className="text-gray-800">
{' '}
* * * * 9870
</strong>
</div>
<button
className="transition-colors duration-300 hover:bg-gray-300 hover:text-blue-600 bg-gray-200 text-blue-500 outline-none border-none ml-4 p-5 font-bold border-none"
type="button"
>
Edit
</button>
</motion.div>
<div className="w-full flex flex-col lg:flex-row justify-between pr-5">
<Link href="/">
<motion.div
whileHover={{ x: 10 }}
whileTap={{ x: 0 }}
className="transition-colors cursor-pointer duration-300 flex flex-row items-center text-gray-400 hover:text-gray-500"
>
<FontAwesomeIcon
icon={faArrowLeft}
size="lg"
className="items-center mr-2"
/>
<span className="text-xl">
Back to products list
</span>
</motion.div>
</Link>
<Button
className="py-5 px-8"
handleClick={handleSubmit}
title="Goto checkout"
>
Goto checkout
</Button>
</div>
</motion.div>
<div className="lg:w-1/3 lg:flex flex-col hidden h-full">
<Cart products={products} />
</div>
</motion.div>
</Layout>
);
}
