react-icons/md#MdInfoOutline JavaScript Examples

The following examples show how to use react-icons/md#MdInfoOutline. 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: announcement.js    From community-forum-frontend with GNU General Public License v3.0 4 votes vote down vote up
render() {
    return (
      <div>
        <div className="AnnouncementsHeading">Activities</div>
        <div className="navTabs">
          <Tabs defaultActiveKey="Announcements" id="uncontrolled-tab-example">
            <Tab
              eventKey="Announcements"
              title="Announcements"
              className="Announcementtab"
            >
              <div className="announcements">
                {announcementData.map((announcement) => {
                  return (
                    <div className="announcement">
                      <div className="topannouncement">
                        <Avatar
                          className="avatar"
                          src={announcement.avatarUrl}
                        ></Avatar>
                        <div className="text">
                          <div>{announcement.description}</div>
                          <div className="bottomannouncement">
                            {announcement.author}, {announcement.topicName}
                          </div>
                        </div>
                        <IconContext.Provider
                          value={{ color: "#F04B58", size: "24px" }}
                        >
                          <div className="icon">
                            <MdInfoOutline />
                          </div>
                        </IconContext.Provider>
                      </div>
                    </div>
                  );
                })}
              </div>
            </Tab>
            <Tab eventKey="Recents" title="Recents" className="recenttab">
              <div className="announcements">
                <div className="announcement">
                  <div className="topannouncement">
                    <Avatar className="avatar"></Avatar>
                    <div className="text">
                      <div>
                        @Jaskirat Singh Mentioned you in the comments in the
                        Topic: “Random”.
                      </div>
                    </div>
                  </div>
                </div>
                <div className="announcement">
                  <div className="topannouncement">
                    <Avatar className="avatar"></Avatar>
                    <div className="text">
                      <div>
                        @Jaskirat Singh Mentioned you in the comments in the
                        Topic: “Random”.
                      </div>
                    </div>
                  </div>
                </div>
                <div className="announcement">
                  <div className="topannouncement">
                    <Avatar className="avatar"></Avatar>
                    <div className="text">
                      <div>
                        @Jaskirat Singh Mentioned you in the comments in the
                        Topic: “Random”.
                      </div>
                    </div>
                  </div>
                </div>
                <div className="announcement">
                  <div className="topannouncement">
                    <Avatar className="avatar"></Avatar>
                    <div className="text">
                      <div>
                        @Jaskirat Singh Mentioned you in the comments in the
                        Topic: “Random”.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Tab>
          </Tabs>
        </div>
      </div>
    );
  }
Example #2
Source File: tasks.js    From community-forum-frontend with GNU General Public License v3.0 4 votes vote down vote up
render() {
    return (
      <div>
        <Modal show={this.state.showModal} onHide={this.handleClose} centered>
          <div className="modalbody">
            <Modal.Body>
              <Form>
                <div className="formdetails">
                  <div className="forminsides">
                    <Form.Group controlId="Description">
                      <Form.Label>Description</Form.Label>
                      <Form.Control
                        as="textarea"
                        rows="3"
                        placeholder="Description"
                        onChange={(e) => {
                          this.handleChange("description", e);
                        }}
                      />
                    </Form.Group>
                    <Form.Group controlId="TopicList">
                      <Form.Label>Topic</Form.Label>
                      <InputGroup>
                        <FormControl
                          placeholder={this.state.topicName}
                          aria-describedby="basic-addon2"
                          disabled="true"
                        />

                        <DropdownButton
                          as={InputGroup.Append}
                          variant="outline-secondary"
                          title=""
                          id="input-group-dropdown-2"
                        >
                          {this.state.Topics.map((topic) => {
                            return (
                              <Dropdown.Item
                                eventKey={topic.topicName}
                                onSelect={() =>
                                  this.handleSelect(
                                    topic.topicName,
                                    {
                                      topic: topic.topicName,
                                      id: topic._id,
                                    },
                                    "topics"
                                  )
                                }
                              >
                                {topic.topicName}
                              </Dropdown.Item>
                            );
                          })}
                        </DropdownButton>
                      </InputGroup>
                    </Form.Group>
                    <Form.Group controlId="assigned">
                      <Form.Label>Assign To:</Form.Label>
                      <InputGroup>
                        <FormControl
                          placeholder={this.state.username}
                          aria-describedby="basic-addon2"
                          disabled="true"
                        />
                        <DropdownButton
                          as={InputGroup.Append}
                          variant="outline-secondary"
                          title=""
                          id="input-group-dropdown-2"
                        >
                          {this.state.users.map((user) => {
                            return (
                              <Dropdown.Item
                                eventKey={user.username}
                                onSelect={() =>
                                  this.handleSelect(
                                    user.username,
                                    {
                                      username: user.username,
                                      email: user.email,
                                      id: user._id,
                                    },
                                    "users"
                                  )
                                }
                              >
                                {user.username}
                              </Dropdown.Item>
                            );
                          })}
                        </DropdownButton>
                      </InputGroup>
                    </Form.Group>
                    <Form.Group controlId="setDate">
                      <Form.Label>Complete By: </Form.Label>
                      <Form.Control
                        type="date"
                        placeholder="Enter email"
                        onChange={(e) => this.handleChange("date", e)}
                      />
                    </Form.Group>
                  </div>
                </div>
                <div className="cta-register">
                  <Button
                    variant="primary"
                    type="submit"
                    onClick={(e) => this.handleAddTask(e)}
                  >
                    Add Task
                  </Button>
                </div>
              </Form>
            </Modal.Body>
          </div>
        </Modal>
        <div className="ToDosHeading">
          To-Do Tasks
          <Button className="addbutton" onClick={this.handleTasksAdd}>
            Add
          </Button>
        </div>
        <div className="navTabs">
          <Tabs defaultActiveKey="ongoing" id="uncontrolled-tab-example">
            <Tab eventKey="ongoing" title="OnGoing" className="ongoingTab">
              <Form>
                {this.state.tasks.map((task) => {
                  return task.completed ? (
                    ""
                  ) : (
                    <div>
                      <Form.Group
                        controlId="formBasicCheckbox"
                        className="formCheckbox"
                        onChange={(e) =>
                          this.handleChangeTask("completed", e, task._id)
                        }
                        id={task.description}
                      >
                        <Form.Check type="checkbox" />
                        <div className="textTasks">
                          <div className="labelParra">{task.description}</div>
                          <div className="subparra">
                            {task.assignedBy.username}, {task.dueDate}.
                          </div>
                        </div>
                        <div className="icons">
                          <FiMoreVertical
                            size={20}
                            className="FiMoreVertical"
                          />
                          <MdInfoOutline size={20} className="FiMoreVertical" />
                        </div>
                      </Form.Group>
                    </div>
                  );
                })}
              </Form>
            </Tab>

            <Tab
              eventKey="completed"
              title="Completed"
              className="completedTab"
            >
              {this.state.tasks.map((task) => {
                return task.completed ? (
                  <Form.Group
                    controlId="formBasicCheckbox"
                    className="formCheckbox"
                    onChange={(e) =>
                      this.handleChangeTask("notCompleted", e, task._id)
                    }
                  >
                    <Form.Check
                      defaultChecked="true"
                      type="checkbox"
                      label={
                        <div className="textTasks">
                          <div className="labelParra">
                            <s>{task.description}</s>
                          </div>
                          <div className="subparra">
                            {task.assignedBy.username}, {task.dueDate}.
                          </div>
                        </div>
                      }
                    />
                    <div className="icons">
                      <FiMoreVertical size={20} className="FiMoreVertical" />
                      <MdInfoOutline size={20} className="FiMoreVertical" />
                    </div>
                  </Form.Group>
                ) : (
                  ""
                );
              })}
            </Tab>
          </Tabs>
        </div>
      </div>
    );
  }