github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/blocks/BlockSearchInput.tsx (about)

     1  import React, { FC, ChangeEvent } from 'react';
     2  import { Button, InputGroup, InputGroupAddon, InputGroupText, Input, Form } from 'reactstrap';
     3  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
     4  import { faSearch } from '@fortawesome/free-solid-svg-icons';
     5  import styles from './blocks.module.css';
     6  
     7  interface BlockSearchInputProps {
     8    onChange: ({ target }: ChangeEvent<HTMLInputElement>) => void;
     9    onClick: () => void;
    10    defaultValue: string;
    11  }
    12  
    13  export const BlockSearchInput: FC<BlockSearchInputProps> = ({ onChange, onClick, defaultValue }) => {
    14    return (
    15      <Form onSubmit={(e) => e.preventDefault()}>
    16        <InputGroup className={styles.blockInput}>
    17          <InputGroupAddon addonType="prepend">
    18            <InputGroupText>
    19              <FontAwesomeIcon icon={faSearch} />
    20            </InputGroupText>
    21          </InputGroupAddon>
    22          <Input placeholder="Search block by ulid" onChange={onChange} defaultValue={defaultValue} />
    23          <InputGroupAddon addonType="append">
    24            <Button className="execute-btn" color="primary" onClick={onClick} type="submit">
    25              Search
    26            </Button>
    27          </InputGroupAddon>
    28        </InputGroup>
    29      </Form>
    30    );
    31  };