reactstrap#Button JavaScript Examples

CustomButton = styled(Button)`
  min-width: 165px;
  width: auto;
  height: 50px;
  letter-spacing: 0.5px;
  line-height: 50px;
  padding: 0 35px 0 35px;
  font-size: 0.75rem;
  background-color: #0369d9;
  color: white;
  text-transform: uppercase;
  font-family: "Open Sans Condensed";
  font-weight: bolder;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;

  &:hover {
    background-color: white;
    color: #0369d9;
    border: 1px solid #0369d9;
  }
`

ActivityModal = (props) => {
  const {
    className
  } = props;

  const activities = useSelector((state) => state.dashboard.activities);
  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  const deleteRead = () => {
 // delete endpoint needed for activities 
  }
  return (
    <div>
      <Button color="danger" onClick={toggle}>Activity</Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Activity</ModalHeader>
        <ModalBody>
          <Activity />
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Sounds Good!</Button>
          <Button color="secondary" onClick={deleteRead}>Mark All Read</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Topbar = ({ toggleSidebar }) => {
  const [topbarIsOpen, setTopbarOpen] = useState(true);
  const toggleTopbar = () => setTopbarOpen(!topbarIsOpen);

  return (
    <Navbar
      className="navbar shadow-sm p-2 mb-5 rounded"
      expand="lg"
      style={{ backgroundColor: "#767B91", color: "white" }}
    >
      <Button color="info" onClick={toggleSidebar}>
        <FontAwesomeIcon icon={faAlignLeft} />
      </Button>
      <NavbarToggler onClick={toggleTopbar} />
      <Collapse isOpen={topbarIsOpen} navbar className="ml-auto pb-2">
        <div className="ml-auto pt-2">
          <img src={require("./Pic1.jpeg")} align="right" width="80px" height="100px" />
          <p align="center">
            {" "}
            Welcome Kishor Buddha
          </p>
        </div>
      </Collapse>
    </Navbar>
  );
}

ProviderForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit} className="addForm">
      <Field label="Nombre" name="name" component={InputField} type="text" />
      <Field label="Telefono" name="phone" component={InputField} type="text" />
      <Field label="Email" name="email" component={InputField} type="text" />
      <Button className="provider-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="provider-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

render() {
        const {
            fields,
            submitContactData
        } = this.props;

        return (
            <Container fluid>
                <Form>
                    {map(fields, field => (
                        <FormGroup>
                            <Label>
                                {field.label}
                                <br/>
                                <Input
                                    key={field.control}
                                    name={field.control}
                                    {...field}
                                />
                            </Label>
                        </FormGroup>
                    ))}
                    <Button
                        onClick={() => submitContactData()}
                    >
                        Submit
                    </Button>
                </Form>
            </Container>
        );
    }

TodoForm = ({ addTodo }) => {
    const [title, setTitle] = useState('')

    const handleSubmit = e => {
        e.preventDefault();
        if (title === '') {
            return alert('Empty Todo')
        }
        const todo = {
            title,
            id: v4()
        }

        addTodo(todo)
        setTitle("")
    }

    return (
        <Form onSubmit={handleSubmit}>
            <FormGroup>
                <InputGroup>
                    <Input
                        type="text"
                        name="todo"
                        id="todo"
                        placeholder='Enter Todo...'
                        value={title}
                        onChange={e => setTitle(e.target.value)}
                    />
                    <Button color="secondary" onClick={handleSubmit}>Add</Button>
                </InputGroup>
            </FormGroup>
        </Form>
    )
}

ProductForm = props => {
  const { handleSubmit, handleCancel } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field
        label="Iniciales"
        name="initials"
        component={InputField}
        type="text"
      />
      <Field
        label="Descripción"
        name="description"
        component={InputField}
        type="text"
      />
      <Button className="product-form__button" color="primary" type="submit">
        Guardar
      </Button>
      <Button
        className="product-form__button"
        color="secondary"
        type="button"
        onClick={handleCancel}
      >
        Cancelar
      </Button>
    </Form>
  );
}

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>
        );
    }

ToolTippedButton = ({
  children,
  tooltip,
  placement = 'top',
  ...props
}) => {
  const [tooltipOpen, setTooltipOpen] = useState(false)
  return (
    <>
      <span id={'bw' + props.id}>
        <Button {...props}>{children}</Button>
      </span>

      <Tooltip
        placement={placement}
        target={'bw' + props.id}
        isOpen={tooltipOpen}
        toggle={() => setTooltipOpen(!tooltipOpen)}
      >
        {tooltip}
      </Tooltip>
    </>
  )
}

render() {
        const {enableMobileMenu, enableMobileMenuSmall} = this.props;
        return (
            <Fragment>
                <div className="app-header__mobile-menu">
                    <div onClick={this.toggleMobileSidebar}>
                        <Hamburger
                            active={enableMobileMenu}
                            type="elastic"
                            onClick={this.toggleMobileSidebar}
                        />
                    </div>
                </div>
                <div className="app-header__menu">
                    <span onClick={this.toggleMobileSmall}>
                        <Button size="sm"
                                className={cx("btn-icon btn-icon-only", {active: enableMobileMenuSmall})}
                                color="primary"
                                onClick={this.toggleMobileSmall}>
                            <div className="btn-icon-wrapper"><FontAwesomeIcon icon={faEllipsisV}/></div>
                        </Button>
                    </span>
                </div>
            </Fragment>
        )
    }

GenreButton = styled(Button)`
    width: 60%;
    margin: 10px;
    border-radius: 20px;
    font-size: 18px;
    font-family: "Gilroy Light";
    font-weight: bold;
    letter-spacing: 1.4px;
`

ReindexDokus = () => {
    const [{ loading, error, success }, setStatus] = React.useState({
        loading: false,
        error: false,
    });

    const onClick = React.useCallback(() => {
        setStatus({
            loading: true,
            error: false,
        });

        request('/dokus/v1/recommender/index-all', 'POST', { json: false })
            .then(() => {
                setStatus({
                    loading: false,
                    error: false,
                    success: true,
                });
            })
            .catch((error) => {
                setStatus({
                    loading: false,
                    error: true,
                });
            });
    }, []);

    return (
        <>
            {error && <Alert color="danger">Noe skjedde</Alert>}
            {success && <Alert color="success">Vellykket!</Alert>}
            <Button color="primary" onClick={onClick} disabled={loading}>
                {loading && <Spinner />}
                {!loading && 'Indekser dokus'}
            </Button>
        </>
    );
}

render() {
    return (
      <div className={s.errorPage}>
        <Container>
          <div className={`${s.errorContainer} mx-auto`}>
            <h1 className={s.errorCode}>404</h1>
            <p className={s.errorInfo}>
              Opps, it seems that this page does not exist here.
            </p>
            <p className={[s.errorHelp, 'mb-3'].join(' ')}>
              If you are sure it should, please search for it:
            </p>
            <Form method="get">
              <FormGroup>
                <Input className="input-no-border" type="text" placeholder="Search Pages" />
              </FormGroup>
              <Link to="app/extra/search">
                <Button className={s.errorBtn} type="submit" color="inverse">
                  Search <i className="fa fa-search text-secondary ml-xs" />
                </Button>
              </Link>
            </Form>
          </div>
          <footer className={s.pageFooter}>
            2020 &copy; Light Blue Template - React Admin Dashboard Template.
          </footer>
        </Container>
      </div>
    );
  }

ErrorPage = () => {
  return (
    <div className={s.pageContainer}>
      <div className={s.errorContainer}>
        <h1 className={s.errorCode}>404</h1>
        <p className={s.errorInfo}>
          Oops. Looks like the page you're looking for no longer exists
        </p>
        <p className={s.errorHelp}>
          But we're here to bring you back to safety
        </p>
        <Link to="/template/dashboard">
          <Button className={`${s.errorBtn} rounded-pill`} type="submit" color="secondary-red">
            Back to Home
          </Button>
        </Link>
      </div>
      <div className={s.imageContainer}>
        <img className={s.errorImage} src={errorImage} alt="Error page" width="80" />
      </div>
      <div className={s.footer}>
        <span className={s.footerLabel}>2021 &copy; Flatlogic. Hand-crafted & Made with</span>
        <FooterIcon />
      </div>
    </div>
  );
}

render() {
    const { fadeIn } = this.state

    return (
      <div>
        <h5 className="mb-4">
          <strong>Fade Effect</strong>
        </h5>
        <div>
          <Button color="primary" onClick={this.toggle}>
            Toggle Fade
          </Button>
          <Fade in={fadeIn} tag="h5" className="mt-3">
            This content will fade in and out as the button is pressed
          </Fade>
        </div>
      </div>
    )
  }

export function NotFoundPage({ history }) {
  return (
    <div>
      <Jumbotron fluid className="bg-dark text-center">
        <Container fluid>
          <h1 className="display-3">
            <FormattedMessage
              id={messages.header.id}
              defaultMessage={messages.header.defaultMessage}
            />
          </h1>
          <p className="lead">¯\_(ツ)_/¯</p>
          <Button onClick={() => history.push('/')} color="secondary">
            <MdHome />
          </Button>
        </Container>
      </Jumbotron>
    </div>
  );
}

export default function Login({ history }) {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")


    const handleSubmit = async evt => {
        evt.preventDefault();
        console.log('result of the submit', email, password)

        const response = await api.post('/login', { email, password })
        const userId = response.data._id || false;

        if (userId) {
            localStorage.setItem('user', userId)
            history.push('/dashboard')
        } else {
            const { message } = response.data
            console.log(message)
        }
    }

    return (
        <Container>
            <h2>Login:</h2>
            <p>Please <strong>Login</strong> into your account</p>
            <Form onSubmit={handleSubmit}>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
                </FormGroup>
                <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
                    <Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
                </FormGroup>
                <Button>Submit</Button>
            </Form>
        </Container>
    );
}

ProjectsCard = ({ data }) => {
	return (
		<Col lg="6">
			<Fade bottom duration={2000} >
				<Card className="shadow-lg--hover shadow mt-4">
					<CardBody>
						<div className="d-flex px-3">
							<div className="pl-4">
								<h3>{data.name}</h3>
								<p className="description mt-3">{data.desc}</p>
								{data.github ? (
									<Button
										className="btn-icon"
										color="github"
										href={data.github}
										target="_blank"
										rel="noopener"
										aria-label="Github"
									>
										<span className="btn-inner--icon">
											<i className="fa fa-github" />
										</span>
									</Button>
								) : null}
								{data.link ? (
									<Button
										className="btn-icon"
										color="success"
										href={data.link}
										target="_blank"
										rel="noopener" aria-label="Twitter"
									>
										<span className="btn-inner--icon">
											<i className="fa fa-arrow-right mr-2" />
										</span>
										<span className="nav-link-inner--text ml-1">
											Demo
										</span>
									</Button>
								) : null}
							</div>
						</div>
					</CardBody>
				</Card>
			</Fade>
		</Col>
	);
}

function TalkAbout() {
    console.log(String(team.teamData[0].items[0].image));
    return (
        <>
            <div className="section text-center">
                <Container>
                    {
                        team.teamData.map((section) => {
                            console.log(section);
                            return(
                                <div>
                                    <h1 className="title heading-main">{section.heading}</h1>
                                    <div>
                                        <Row>
                                            {section.items.map((teamMember)=>{
                                                console.log(teamMember);
                                                return(
                                                    <Col lg="3 ml-auto mr-auto" sm="6">
                                                        <Card className="card-profile card-plain card-auv">
                                                            <CardBody>
                                                                <a href="#pablo" onClick={(e) => e.preventDefault()}>
                                                                    <div className="author">
                                                                        <img
                                                                            alt="..."
                                                                            src={require("assets/img/"+ teamMember.image)}
                                                                            className="image-prof"
                                                                        />
                                                                        <></>
                                                                        <CardTitle tag="h4" className="auv-description-primary pt-3">
                                                                            {teamMember.name}
                                                                        </CardTitle>
                                                                        <h6 className="auv-description-primary"> {teamMember.subheading}</h6>
                                                                    </div>
                                                                </a>
                                                            </CardBody>
                                                            <CardFooter className="text-center margin-neg">
                                                                <Button
                                                                    className="btn-just-icon btn-neutral"
                                                                    color="link"
                                                                    href="#pablo"
                                                                    onClick={(e) => e.preventDefault()}
                                                                >
                                                                    <i className="fa fa-facebook flip"/>
                                                                </Button>
                                                                <Button
                                                                    className="btn-just-icon btn-neutral ml-1"
                                                                    color="link"
                                                                    href="#pablo"
                                                                    onClick={(e) => e.preventDefault()}
                                                                >
                                                                    <i className="fa fa-linkedin flip"/>
                                                                </Button>
                                                            </CardFooter>
                                                        </Card>
                                                    </Col>
                                                )
                                            })}
                                        </Row>
                                    </div>
                                </div>
                            )
                        })
                    }
                </Container>
            </div>
        </>
    );
}

// download(id){
    //  var token = "Bearer " + localStorage.getItem("jwt");
    //  let url = '/getpostbyid/' + id;
    // fetch(url,{
    //    headers :{
    //            "Authorization" : token,
    //         }
    // })
		// 	.then(response => {
		// 		response.blob().then(blob => {
		// 			let url = window.URL.createObjectURL(blob);
		// 			let a = document.createElement('a');
		// 			a.href = url;
		// 			a.download = 'employees.json';
		// 			a.click();
		// 		});
		// 		//window.location.href = response.url;
		// });
    // }
    
    render(){
        let peopleCards = this.state.files.map(data => {
       return (
      <Col xs="3" key = {data.musicId} className="col">
       <div className="div">
        <Card>
          <i class="fas fa-file-alt"></i>
          {/* <Button color="danger" className="btn"  onClick={() => this.download(data.musicId)}>Download</Button> */}
          <CardBody className="cbody">
            <CardTitle><h4 className="tag">{data.tag}</h4></CardTitle>
            <CardSubtitle className="name">{data.name}</CardSubtitle>
            <CardText className="description">{data.description}</CardText>
            <Button color="danger" className="btn"  onClick={() => this.delete(data.musicId)}>Delete</Button>
            
          </CardBody>
        </Card>
      </div>
      </Col>
      )
    })
    return (
      <Container fluid="md" className="container">
        <Row xs="3" className="row">
          {peopleCards}
        </Row>
         <ToastContainer
          position="top-center"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          />
      </Container>
      
    )
    }

render(){
    return (
        <div style={{backgroundColor:'#C7CCDB'}}>
        	<Container>
        	<Row>
        		<NavLink tag={Link} to={"/AddStudent"}>
                    <Button
                      style={{
                        backgroundColor: "#2A324B",
                        color: "white",
                        borderColor: "#2A324B",
                      }}
                    >
                      Add Assessment
                    </Button>
                  </NavLink>
        	</Row>
        	<Row>
        		<Col align="left" styles={{padding:'10'}}>
                		<div>
                			<ReactHTMLTableToExcel  
                    			className="btn btn-secondary"  
                    			table="Data"  
                    			filename="Filtered Students"  
                    			sheet="Sheet1"  
                    			buttonText="EXCEL"
                    			style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}} 
                    		/>
                    	</div>
                    </Col>
        	</Row>
        	<br/>
        	<Row>
            	<Table id="Data" responsive striped style={{backgroundColor:'white'}}>
                    <thead style={{backgroundColor:'#2A324B',color:'white'}}>
                        <tr>
                            <th>Sno</th>
                            <th align="left">Name of the Assessment</th>
                            <th align="left">YOP</th>
                            <th>Date Of Assessment</th>
                            <th>No of students attended</th>
                            <th>No of Absentees</th>
                            <th>Highest Score</th>
                            <th>Average Score</th>
                            <th>Least Score</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.StudentsList()}
                    </tbody>
            	</Table>
            </Row>
            </Container>
        </div>
    )
	}

PlaylistModal = (props) => {
  const [modal, setModal] = useState(false)
  const [playlistName, setPlaylistName] = useState()
  const [playlistDes, setPlaylistDes] = useState()

  function addPlaylist(e) {
    const res = fetch(`https://api.codedigger.tech/lists/userlist/new`, {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
        Authorization: `Bearer ${props.acc}`,
      },
      body: JSON.stringify({
        name: playlistName,
        description: playlistDes,
        public: true,
      }),
    })

    window.location.reload()

    res.catch((err) => console.log(err))
  }
  const toggle = () => setModal(!modal)

  return (
    <div>
      <Button id="Add_Problem_List" color="danger" onClick={toggle}>
        Add Problem List
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Add a Problem List</ModalHeader>
        <ModalBody>
          Add the name and the description for your Problem List.
        </ModalBody>
        <Form id="form">
          <div>
            <Input
              type="text"
              id="playlistName"
              onChange={(e) => setPlaylistName(e.target.value)}
              placeholder="Playlist Name"
            />
            <Input
              type="textarea"
              onChange={(e) => setPlaylistDes(e.target.value)}
              id="playlistdec"
              placeholder="Playlist Description"
            />
            <Button
              id="Add_Problem_List_With_Details"
              color="primary"
              onClick={addPlaylist}
            >
              Add Problem List
            </Button>
          </div>
        </Form>
        <ModalFooter>
          <Button id="close" color="secondary" onClick={toggle}>
            Close
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  )
}

Presentation = props => {
  return (
    <Container fluid>
      <Row className="my-1">
        <Col>
          <h1>Proveedores</h1>
        </Col>
      </Row>
      <Row>
        <Col>
          <Search
            handleFilter={props.handleFilter}
            submitFilter={props.submitFilter}
            clearFilter={props.clearFilter}
            filters={props.filters}
          />
        </Col>
      </Row>
      <Row className="my-1">
        <Col>
          <Button
            className="provider__button"
            color="primary"
            aria-label="Agregar"
            onClick={() => props.push(props.urls.create)}
          >
            <FaPlus className="provider__button-icon" />
            AGREGAR
          </Button>
        </Col>
      </Row>
      <Row className="my-3">
        <Col>
          <ReactTable
            {...props}
            data={props.data}
            loading={props.dataLoading}
            columns={columns}
            defaultPageSize={props.defaultPageSize}
            className="-striped -highlight"
          />
        </Col>
      </Row>
    </Container>
  );
}

render() {
        const {
            fields,
            submitAssignmentData,
            assignment
        } = this.props;

        return (
            <Container>
                <Form>
                    {map(fields, field => (
                        <FormGroup>
                            <Label>
                                {field.label}
                                <br/>
                                <Input
                                    key={field.control}
                                    name={field.control}
                                    {...field}
                                >
                                    {!field.value && (<option>[Seleccione]</option>)}
                                    {map(field.options, opt => (
                                        <option value={opt.id}>
                                            {opt.name ? `${opt.name} - ${opt.address}` : `${opt.firstName} ${opt.lastName}`}
                                        </option>
                                    ))}
                                </Input>
                            </Label>
                        </FormGroup>
                    ))}
                    <Button
                        onClick={() => submitAssignmentData()}
                        disabled={!assignment.contact || !assignment.department}
                    >
                        Guardar
                    </Button>
                </Form>
            </Container>
        );
    }

Home = () => {
    const context = useContext(UserContext)
    const [query, setQuery] = useState("")
    const [user, setUser] = useState(null)

    const fetchDetails = async () => {
        try {
            const { data } = await Axios.get(`https://api.github.com/users/${query}`)
            setUser(data)
            console.log(data)
        } catch (err) {
            toast("Unable to locate the user", {
                type: "error"
            })
        }
    }

    if (!context.user?.uid) {
        return <Navigate to="/signin" />
    }

    return (
        <Container>
            <Row className=" mt-3">
                <Col md="5">
                    <InputGroup>
                        <Input
                            type="text"
                            value={query}
                            placeholder="Please provide the username"
                            onChange={e => setQuery(e.target.value)}
                        />
                        <InputGroupAddon addonType="append">
                            <Button onClick={fetchDetails} color="primary">Fetch User</Button>
                        </InputGroupAddon>
                    </InputGroup>
                    {user ?
                        <UserCard user={user} /> :
                        null
                    }
                </Col>
                <Col md="7">
                    {user ? <Details apiUrl={user.repos_url} /> : null}
                </Col>
            </Row>
        </Container>
    );
}

ProductView = ({ type = {}, push, match }) => {
  return (
    <Container fluid>
		<div className="block-header">
            <h1>{type.initials}</h1>
        </div>
        <div className="info-box">
            <Row>
                <Col lg="2">Id</Col>
                <Col>{type.id}</Col>
            </Row>
            <Row>
                <Col lg="2">Iniciales</Col>
                <Col>{type.initials}</Col>
            </Row>
            <Row>
                <Col lg="2">Descripción</Col>
                <Col>{type.description}</Col>
            </Row>
      </div>
      <div className="product-view__button-row">
        <Button title="Editar" aria-label="Editar"
          className="product-form__button"
          color="primary"
          onClick={() => push(`/product-type/update/${match.params.id}`)}
        >
          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="product-list__button-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"></path></svg>
        </Button>
        <Button title="Eliminar" aria-label="Eliminar"
          className="product-form__button"
          color="danger"
          onClick={() => push(`/product-type/view/${match.params.id}/remove`)}
        >
          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="product-list__button-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>			
        </Button>
        <Button  title="Volver" aria-label="Volver"
          outline
          className="product-form__button"
          color="secondary"
          onClick={() => push(`/product-type`)}
        >
          <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 470 474" width="20px" height="16px" xmlSpace="preserve">
				<path d="M384.834,180.699c-0.698,0-348.733,0-348.733,0l73.326-82.187c4.755-5.33,4.289-13.505-1.041-18.26    c-5.328-4.754-13.505-4.29-18.26,1.041l-82.582,92.56c-10.059,11.278-10.058,28.282,0.001,39.557l82.582,92.561    c2.556,2.865,6.097,4.323,9.654,4.323c3.064,0,6.139-1.083,8.606-3.282c5.33-4.755,5.795-12.93,1.041-18.26l-73.326-82.188    c0,0,348.034,0,348.733,0c55.858,0,101.3,45.444,101.3,101.3s-45.443,101.3-101.3,101.3h-61.58    c-7.143,0-12.933,5.791-12.933,12.933c0,7.142,5.79,12.933,12.933,12.933h61.58c70.12,0,127.166-57.046,127.166-127.166    C512,237.745,454.954,180.699,384.834,180.699z"/>
			</svg>
        </Button>
      </div>
    </Container>
  );
}

MoreInfoPopover = () => {
  const [popoverOpen, setPopoverOpen] = React.useState(false)

  const toggle = () => setPopoverOpen(!popoverOpen)

  return (
    <div style={{ margin: '5px' }}>
      <Button id="moreInfo" type="button" color="primary">
        More Info
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="moreInfo"
        toggle={toggle}
      >
        <PopoverHeader>Lorem ipsum</PopoverHeader>
        <PopoverBody>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </PopoverBody>
      </Popover>
    </div>
  )
}

render() {
        return (
            <Navbar color='dark' dark expand='lg'>
                <Link
                    to='/'
                    className='navbar-brand'
                    style={{ fontFamily: "Monoton", fontWeight: "100" }}>
                    <img
                        src={logo}
                        style={{ maxWidth: "40px" }}
                        className='mx-2'
                    />
                    BlogApp
                </Link>
                <NavbarToggler onClick={this.toggle} />{" "}
                <Collapse isOpen={this.state.isOpen} navbar>
                    {this.state.user ? (
                        <Nav className='ml-auto mr-2' navbar>
                            <NavItem className='navbar-item'>
                                <ButtonDropdown
                                    isOpen={this.state.isDropdownOpen}
                                    toggle={this.dropdownToggle}>
                                    <Button id='caret' color='primary'>
                                        <FontAwesomeIcon
                                            icon={faUser}
                                            className='mr-2'
                                        />
                                        {this.state.user.username}
                                    </Button>
                                    <DropdownToggle caret color='primary' />
                                    <DropdownMenu right>
                                        <Link
                                            to='/myblogs/'
                                            className='dropdown-item'>
                                            My Blogs
                                        </Link>

                                        <DropdownItem divider />
                                        <DropdownItem onClick={this.logout}>
                                            logout
                                            <FontAwesomeIcon
                                                icon={faSignOutAlt}
                                                className='ml-3'
                                            />
                                        </DropdownItem>
                                    </DropdownMenu>
                                </ButtonDropdown>
                            </NavItem>
                        </Nav>
                    ) : (
                        <Nav className='ml-auto' navbar>
                            <NavItem className='navbar-item'>
                                <Link className='nav-link' to='/login'>
                                    Login
                                </Link>
                            </NavItem>
                        </Nav>
                    )}
                </Collapse>
            </Navbar>
        );
    }

render() {
        function getBoxDis(auctions) {
            if (auctions && auctions[0].spentTransactionId)
                return <ShowHistories
                    boxes={auctions}
                />
            else return <ShowAuctions
                auctions={auctions}
                preload={true}
            />
        }

        return (
            <Fragment>
                <NewAuctionAssembler
                    isOpen={this.state.modalAssembler}
                    close={this.toggleModal}
                    assemblerModal={this.toggleAssemblerModal}
                />

                <SendModal
                    isOpen={this.state.assemblerModal}
                    close={this.toggleAssemblerModal}
                    bidAmount={this.state.bidAmount}
                    isAuction={this.props.isAuction}
                    bidAddress={this.state.bidAddress}
                    currency={this.state.currency}
                />
                <div className="app-page-title">
                    <div className="page-title-wrapper">
                        <div className="page-title-heading">
                            <div
                                className={cx('page-title-icon', {
                                    'd-none': false,
                                })}
                            >
                                <i className="pe-7s-volume2 icon-gradient bg-night-fade"/>
                            </div>
                            <div>
                                Auction Details
                            </div>
                        </div>
                        <div className="page-title-actions">
                            <TitleComponent2/>
                        </div>
                        <Button
                            onClick={this.openAuction}
                            outline
                            className="btn-outline-lin m-2 border-0"
                            color="primary"
                        >
                            <i className="nav-link-icon lnr-plus-circle"> </i>
                            <span>New Auction</span>
                        </Button>
                    </div>
                </div>
                {this.state.loading ? (
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                    >
                        <PropagateLoader
                            css={override}
                            size={20}
                            color={'#0086d3'}
                            loading={this.state.loading}
                        />
                    </div>
                ) : (
                    <div>
                        {getBoxDis(this.state.auctions)}
                    </div>
                )}
            </Fragment>
        );
    }