react-icons/md#MdSearch JavaScript Examples

The following examples show how to use react-icons/md#MdSearch. 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: ProviderSearch.js    From HexactaLabs-NetCore_React-Initial with Apache License 2.0 6 votes vote down vote up 
Search = props => {
  return (
    <React.Fragment>
      <h4>Búsqueda</h4>
      <Row>
        <Col>
		<Input
					name="name"
					id="nameInput"
					type="text"
					onChange={props.handleFilter}
					value={props.filters.name}
					placeholder="Nombre"
				/>
        </Col>
        <Col>
		<Input
					name="email"
					id="emailInput"
					type="text"
					onChange={props.handleFilter}
					value={props.filters.email}
					placeholder="Email"
				/>
        </Col>
        <Col>
          <Button color="primary" onClick={props.submitFilter}>
            <MdSearch /> Buscar
          </Button>
          <Button color="primary" className="ml-3" onClick={props.clearFilter}>
            <MdCancel /> Limpiar
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
}
Example #2
Source File: StoreSearch.js    From HexactaLabs-NetCore_React-Initial with Apache License 2.0 6 votes vote down vote up 
Search = props => {
  return (
    <React.Fragment>
      <h4>Búsqueda</h4>
      <Row>
        <Col>
          <Input
            name="name"
            id="nameInput"
            type="text"
            onChange={props.handleFilter}
            value={props.filters.name}
            placeholder="Nombre"
          />
        </Col>
        <Col>
          <Input
            name="address"
            id="addressInput"
            type="text"
            onChange={props.handleFilter}
            value={props.filters.address}
            placeholder="Dirección"
          />
        </Col>
        <Col>
          <Button color="primary" onClick={props.submitFilter}>
            <MdSearch /> Buscar
          </Button>
          <Button color="primary" className="ml-3" onClick={props.clearFilter}>
            <MdCancel /> Limpiar
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
}
Example #3
Source File: ProductSearch.js    From HexactaLabs-NetCore_React-Final with Apache License 2.0 6 votes vote down vote up 
Search = props => {
    return (
        <React.Fragment>
            <h4>Búsqueda</h4>
            <Row>
                <Col>
                    <Input
                        name="Name"
                        id="nameInput"
                        type="text"
                        onChange={props.handleFilter}
                        value={props.filters.Name}
                        placeholder="Nombre"
                    />
                </Col>
                <Col>
                    <Input
                        name="Brand"
                        id="brandInput"
                        type="text"
                        onChange={props.handleFilter}
                        value={props.filters.Brand}
                        placeholder="Tipo de producto"
                    />
                </Col>
                <Col>
                    <Button color="primary" onClick={props.submitFilter}>
                        <MdSearch /> Buscar
          </Button>
                    <Button color="primary" className="ml-3" onClick={props.clearFilter}>
                        <MdCancel /> Limpiar
          </Button>
                </Col>
            </Row>
        </React.Fragment>
    );
}
Example #4
Source File: ProductTypeSearch.js    From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 6 votes vote down vote up 
Search = (props) => {
  return (
    <React.Fragment>
      <h4>Búsqueda</h4>
      <Row>
        <Col>
          <Input
            name="initials"
            id="nameInput"
            type="text"
            onChange={props.handleFilter}
            value={props.filters.initials}
            placeholder="Iniciales"
          />
        </Col>
        <Col>
          <Input
            name="description"
            id="emailInput"
            type="text"
            onChange={props.handleFilter}
            value={props.filters.description}
            placeholder="Descripcion"
          />
        </Col>
        <Col>
          <Button color="primary" onClick={props.submitFilter}>
            <MdSearch /> Buscar
          </Button>
          <Button color="primary" className="ml-3" onClick={props.clearFilter}>
            <MdCancel /> Limpiar
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
}
Example #5
Source File: Search.js    From js-code with ISC License 6 votes vote down vote up 
Search = () => {
	const [user, setUser] = React.useState('');
	const { requests, searchGithubUser } = React.useContext(GithubContext);

	const handleSubmit = (e) => {
		e.preventDefault();
		if (user) {
			searchGithubUser(user);
		}
		console.log(user);
	};

	return (
		<section className='section'>
			<Wrapper className='section-center'>
				<form onSubmit={handleSubmit}>
					<div className='form-control'>
						<MdSearch></MdSearch>
						<input
							data-testid='search-bar'
							type='text'
							placeholder='enter github user name'
							value={user}
							onChange={(e) => {
								setUser(e.target.value);
							}}
						></input>
						<button type='submit'>search</button>
					</div>
				</form>
				<h3 data-testid='rate-limit'>requests: {requests}/60</h3>
			</Wrapper>
		</section>
	);
}
Example #6
Source File: ProductTypeSearch.js    From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 6 votes vote down vote up 
Search = props => {
  return (
    <React.Fragment>
      <h4>Búsqueda</h4>
      <Row>
        <Col>
		<Input
					name="initials"
					id="initialsInput"
					type="text"
					onChange={props.handleFilter}
					value={props.filters.initials}
					placeholder="Iniciales"
				/>
        </Col>
        <Col>
		<Input
					name="description"
					id="descriptionInput"
					type="text"
					onChange={props.handleFilter}
					value={props.filters.description}
					placeholder="Descripcion"
				/>
        </Col>
        <Col>
          <Button color="primary" onClick={props.submitFilter}>
            <MdSearch /> Buscar
          </Button>
          <Button color="primary" className="ml-3" onClick={props.clearFilter}>
            <MdCancel /> Limpiar
          </Button>
        </Col>
      </Row>
    </React.Fragment>
  );
}
Example #7
Source File: index.js    From project-s0-t2-env with MIT License 4 votes vote down vote up 
function HomePage(props) {
  const user = props.user;
  const { data: names } = useSWR("/api/cities/all", fetch, {});

  return (
    <Layout
      user={user}
      names={names}
      onChange={(event, newValue) => {
        if (newValue != null) {
          window.location.href = "/cities/" + newValue;
        }
      }}
    >
      <title>Environmental Impacts Dashboard</title>
      <style jsx>
        {`
          img {
            width: 3000px;
            height: 400px;
            object-fit: cover;
          }
        `}
      </style>
      <Carousel>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://media.graytvinc.com/images/810*538/Industrial+waste+water.jpg"
            alt="Water"
          />
          <Carousel.Caption style={{ color: "#000000" }}>
            <h3>Water Pollution </h3>
            <p>
              Find local stats regarding contaminant levels in drinking water
            </p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block"
            src="https://images.unsplash.com/photo-1536697882102-638b66a6ef20?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80"
            alt="Air"
          />

          <Carousel.Caption style={{ color: "#000000" }}>
            <h3>Air Pollution</h3>
            <p>Access air pollutant information</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img
            className="d-block w-100"
            src="https://assets.weforum.org/article/image/large_LiSyr56ECs8p4TINfhoKnM2of_u9kWL2yLapGD5HLX8.png"
            alt="CO2"
          />

          <Carousel.Caption style={{ color: "#000000" }}>
            <h3>CO2 emissions</h3>
            <p>Learn more about local CO2 emissions</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
      <Container style={{ marginTop: "40px" }}>
        <CardDeck>
          <Card className="text-center">
            <h1>
              <MdSearch />
            </h1>
            <Card.Title>Search Cities in CA</Card.Title>
          </Card>
          <Card className="text-center">
            <h1>
              <MdCompareArrows />
            </h1>
            <Card.Title>Compare Cities</Card.Title>
          </Card>
          <Card className="text-center">
            <h1>
              <MdPlaylistAddCheck />
            </h1>
            <Card.Title>Receive Personal Feedback</Card.Title>
          </Card>
        </CardDeck>
        <p
          style={{
            fontSize: "20px",
            margin: "10px",
          }}
        >
          This application provides a dashboard of information about
          environmental impact data for a majority of the cities in California.
          Navigating to a city allows you to view information about Carbon
          emissions, air quality, and water quality for the selected city. The
          app also allows for you to login and personally receive feedback about
          your daily consumption.
        </p>
      </Container>
    </Layout>
  );
}