Site-Proximo/src/js/Components/Selected.js
2021-02-04 19:27:45 +01:00

47 lines
No EOL
1.9 KiB
JavaScript

import React, { Component } from 'react';
import '../../css/Components/selected.css';
import { Icon} from '@iconify/react';
import minusIcon from '@iconify/icons-fa-solid/minus';
import plusIcon from '@iconify/icons-fa-solid/plus';
import { Tooltip, Zoom } from '@material-ui/core';
class Selected extends Component {
constructor(props){
super(props)
this.state = {
}
}
render() {
return (
<div id="selectedBox">
{this.props.counter ?
<>
<p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
<div id = "selectedActions">
<Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
<div>
<Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
</Tooltip>
<Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
<div>
<Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
</Tooltip>
<Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
<div>
<Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
</div>
</Tooltip>
</div>
</>
: null}
</div>
);
}
}
export default Selected;