react-icons/md#MdDateRange JavaScript Examples

The following examples show how to use react-icons/md#MdDateRange. 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: index.js    From official-website-backend with MIT License 5 votes vote down vote up 
SingleEvent = ({ event }) => {
  const statusMap = {
    Soon: "warning",
    Closed: "danger",
    Opened: "primary",
  };

  return (
    <div className="container_card row">
      <div className="img_card">
        {event.eventImage ? (
          <img alt="event" src={event.eventImage} className="rounded-circle" />
        ) : (
          <img
            alt="event"
            src={`/images/${event.category}.jpg`}
            className="rounded-circle"
          />
        )}
      </div>

      <div className="details_card">
        <div className="title_event">
          <h4>{event.name.toUpperCase()}</h4>
        </div>
        <div className="location_event">
          <h6>
            <HiLocationMarker /> {event.eventLocation.toUpperCase()}
          </h6>
        </div>
        <div className="date_time_event">
          <h6>
            <MdDateRange /> From:{" "}
            {moment(event.startDate).format("MMM Do YYYY, h:mm A")}
          </h6>
          <h6>
            <MdDateRange /> To:{" "}
            {moment(event.endDate).format("MMM Do YYYY, h:mm A")}
          </h6>
        </div>
        {event.status === "Opened" && (
          <div className="details_event">
            <h6>
              {event.eventDetails ? (
                <Link to={event.eventDetails}>More Details</Link>
              ) : (
                <Link to={`events/${event._id}/${event.name}`}>
                  More Details
                </Link>
              )}
            </h6>
          </div>
        )}
        <div
          className={`type_event badge badge-pill badge-${
            statusMap[event.status]
          }`}
        >
          <h5>{event.status}</h5>
        </div>
      </div>
    </div>
  );
}