semantic-ui-react#Card JavaScript Examples

export default function QuestionList(props) {
  let params,
    search = "";
  if (props.location.search !== "") {
    params = queryString.parse(props.location.search);
    search = params.search;
  }
  let query = GET_FILTERED_QUESTIONS;
  let selectionSet = "queryQuestion";
  if (search === "") {
    query = GET_TOP_QUESTIONS;
    selectionSet = "myTopQuestions";
  }

  const { loading, error, data } = useQuery(query, {
    variables: { search },
    fetchPolicy: "network-only"
  });
  if (loading) return "Fetching Questions...";
  if (error) return `Error: ${error}`;
  const questions = data[selectionSet];
  
  return (
    <div className="container">
      <Card.Group itemsPerRow={1}>
        {questions.map(question => (
          <Question key={question.text} question={question} />
        ))}
      </Card.Group>
    </div>
  );
}

render() {
    const { data, extra, actions } = this.props;
    const linkTo = BackOfficeRoutes.documentDetailsFor(data.metadata.pid);
    return (
      <Card centered className="bo-relation-card" data-test={data.metadata.pid}>
        <Card.Meta className="discrete">
          {actions}
          {data.metadata.document_type || data.metadata.mode_of_issuance}
        </Card.Meta>
        {recordToPidType(data) === 'docid' ? (
          <LiteratureCover
            size="small"
            url={_get(data, 'metadata.cover_metadata.urls.medium')}
          />
        ) : (
          <SeriesIcon size="huge" color="grey" />
        )}
        <Card.Content>
          <Card.Header as={Link} to={linkTo} target="_blank">
            <LiteratureTitle title={data.metadata.title} />
          </Card.Header>
          <Card.Meta>
            <DocumentAuthors
              authors={data.metadata.authors}
              hasOtherAuthors={data.metadata.other_authors}
            />
          </Card.Meta>
        </Card.Content>
        {!_isEmpty(extra) && <Card.Content extra>{extra}</Card.Content>}
      </Card>
    );
  }

export default function Product(props) {
  const context = useContext(Context);
  const { user } = context;

  const pic = props.product.picture1
    ? props.product.picture1
    : "https://react.semantic-ui.com/images/avatar/large/matthew.png";

  const extra = user ? (
    <Card.Content extra>
      <Detail product={props.product} />
    </Card.Content>
  ) : null;

  return (
    <Card>
      <Image src={pic} wrapped ui={false} />
      <Label color="teal" size="large" attached="top left">
        Comida
      </Label>
      <Card.Content>
        <Card.Header>
          <Header floated="left">{props.product.name}</Header>
          <Header floated="right" color="teal">
            ${props.product.price}
          </Header>
        </Card.Header>
        <Card.Description>{props.product.description}</Card.Description>
      </Card.Content>
      {extra}
    </Card>
  );
}

render() {
    const { data, extra, actions } = this.props;
    const linkTo = BackOfficeRoutes.seriesDetailsFor(data.metadata.pid);
    return (
      <Card centered className="bo-relation-card" data-test={data.metadata.pid}>
        <Card.Meta className="discrete">
          {actions}
          {data.metadata.series_type || data.metadata.mode_of_issuance}
        </Card.Meta>
        <SeriesIcon size="huge" color="grey" />
        <Card.Content>
          <Card.Header as={Link} to={linkTo} target="_blank">
            <LiteratureTitle title={data.metadata.title} />
          </Card.Header>
          <Card.Meta>
            <SeriesAuthors authors={data.metadata.authors} />
            <div>
              {data.metadata.edition ? `ed.  ${data.metadata.edition}` : null}
              {data.metadata.publication_year &&
                `(${data.metadata.publication_year})`}
            </div>
          </Card.Meta>
        </Card.Content>
        {!_isEmpty(extra) && <Card.Content extra>{extra}</Card.Content>}
      </Card>
    );
  }

export default function Metadata (props) {
  const { api } = useSubstrate();
  const [metadata, setMetadata] = useState({ data: null, version: null });

  useEffect(() => {
    const getMetadata = async () => {
      try {
        const data = await api.rpc.state.getMetadata();
        setMetadata({ data, version: data.version });
      } catch (e) {
        console.error(e);
      }
    };
    getMetadata();
  }, [api.rpc.state]);

  return (
    <Grid.Column>
      <Card>
        <Card.Content>
          <Card.Header>Metadata</Card.Header>
          <Card.Meta><span>v{metadata.version}</span></Card.Meta>
        </Card.Content>
        <Card.Content extra>
          <Modal trigger={<Button>Show Metadata</Button>}>
            <Modal.Header>Runtime Metadata</Modal.Header>
            <Modal.Content scrolling>
              <Modal.Description>
                <pre><code>{JSON.stringify(metadata.data, null, 2)}</code></pre>
              </Modal.Description>
            </Modal.Content>
          </Modal>
        </Card.Content>
      </Card>
    </Grid.Column>
  );
}

LiteratureSearchResultsGrid = ({
  results,
  overridableId,
  parentPid,
}) => {
  const cards = results.map((result) => {
    const volume = findVolume(result, parentPid);
    return recordToPidType(result) === 'docid' ? (
      <DocumentCard key={result.metadata.pid} data={result} volume={volume} />
    ) : (
      <SeriesCard key={result.metadata.pid} data={result} volume={volume} />
    );
  });
  return (
    <>
      <Media greaterThanOrEqual="largeScreen">
        <Card.Group doubling stackable itemsPerRow={5}>
          {cards}
        </Card.Group>
      </Media>
      <Media lessThan="largeScreen">
        <Card.Group doubling stackable itemsPerRow={3}>
          {cards}
        </Card.Group>
      </Media>
    </>
  );
}

export default function ContactList({ contacts }) {

  const cards = () => {
    return contacts.map(contact => {
      return (
        <ContactCard key={contact._id} contact={contact}/>
      )
    })
  }

  return (
    <Card.Group>
      { cards() }
    </Card.Group>
  )
}

render() {
    const [fromDate, toDate] = this.getCurrentDates();

    return (
      <Card>
        <Card.Content>
          <Card.Header>Date</Card.Header>
          <Card.Meta>
            <span>*Loan start date</span>
          </Card.Meta>
        </Card.Content>
        <Card.Content>
          <DatePicker
            maxDate={toDate}
            defaultValue={fromDate}
            placeholder="From"
            handleDateChange={(value) =>
              this.onDateChange(['loans_from_date', value])
            }
          />
        </Card.Content>
        <Card.Content>
          <DatePicker
            minDate={fromDate}
            defaultValue={toDate}
            placeholder="To"
            handleDateChange={(value) =>
              this.onDateChange(['loans_to_date', value])
            }
          />
        </Card.Content>
      </Card>
    );
  }

render() {
    const { position } = this.props;
    return (
      <Form>
        <Form.Group grouped widths="equal">
          <Card.Group stackable itemsPerRow={3}>
            {this.renderCandidates(position)}
          </Card.Group>
        </Form.Group>
      </Form>
    );
  }

export default function Question({ question }) {
  const history = useHistory();
  const viewQuestion = (questionID) => {
    history.push({
      pathname: '/view',
      search: `?questionID=${questionID}`
    })
  }
  return (
    <Card
      onClick={() => viewQuestion(question.id)}
      header={question.title}
      meta={question.author.username}
      description={question.text}
    />
  );
}

function Product({ id, title, price, rating, imageUrl }) {
  const [, dispatch] = useStateValue();

  const addTobasket = () => {
    dispatch({
      type: "ADD_TO_BASKET",
      item: {
        id,
        title,
        price,
        rating,
        imageUrl,
      },
    });
  };
  return (
    <div className="product">
      <Card className="product__card">
        <Image className="product__image" centered src={imageUrl} />
        <Card.Content>
          <Card.Header className="product__title">{title}</Card.Header>
          <Card.Meta>
            <Rating icon="star" defaultRating={rating} maxRating={5} />
          </Card.Meta>
          <Card.Description>
            <span className="product__price">${price}</span>
          </Card.Description>
        </Card.Content>
        <Card.Content extra className="product__footer">
          <Button inverted className="product__button" onClick={addTobasket}>
            ADD TO BASKET
          </Button>
        </Card.Content>
      </Card>
    </div>
  );
}

ProjectCard = ({ data }) => {
  return (
    <div className="project-card-main-container">
      <Card>
        <Card.Content>
          <Card.Header>{data.title}</Card.Header>
          <Card.Meta>{data.student_name}</Card.Meta>
          <Card.Description>{data.short_description}</Card.Description>
        </Card.Content>
        <Card.Content extra>
          <div className="ui two buttons">
            <OutboundLink
              className="project-card-link"
              href={data.project_url}
              target="_blank"
              rel="noreferrer"
            >
              <Button basic color="green">
                More Details
              </Button>
            </OutboundLink>
            <OutboundLink
              className="project-card-link"
              href={data.code_url}
              target="_blank"
              rel="noreferrer"
            >
              <Button basic color="orange">
                Code Submission
              </Button>
            </OutboundLink>
          </div>
        </Card.Content>
      </Card>
    </div>
  )
}

export default function QuestionList(props) {
  let params,
    search = "";
  if (props.location.search !== "") {
    params = queryString.parse(props.location.search);
    search = params.search;
  }
  let query = GET_FILTERED_QUESTIONS;
  if (search === "") {
    query = GET_TOP_QUESTIONS;
  }

  const { loading, error, data } = useQuery(query, {
    variables: { search },
    fetchPolicy: "network-only"
  });
  if (loading) return "Fetching Questions...";
  if (error) return `Error: ${error}`;
  const questions = data.queryQuestion;
  
  return (
    <div className="container">
      <Card.Group itemsPerRow={1}>
        {questions.map(question => (
          <Question key={question.text} question={question} />
        ))}
      </Card.Group>
    </div>
  );
}

function PostCard({
  post: { body, createdAt, id, username, likeCount, commentCount, likes }
}) {
  const { user } = useContext(AuthContext);

  return (
    <Card id="post-card-home" fluid>
      <Card.Content>
        <Image
          floated="right"
          size="mini"
          src="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        />
        <Card.Header id="user-post">{username}</Card.Header>
        <Card.Meta as={Link} to={`/posts/${id}`}>
          {moment(createdAt).fromNow(true)}
        </Card.Meta>
        <Card.Description>{body}</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <LikeButton user={user} post={{ id, likes, likeCount }} />
        <MyPopup content="Comment">
          <Button labelPosition="right" as={Link} to={`/posts/${id}`}>
            <Button color="blue" basic>
              <Icon name="comments" />
            </Button>
            <Label basic color="blue" pointing="left">
              {commentCount}
            </Label>
          </Button>
        </MyPopup>
        {user && user.username === username && <DeleteButton postId={id} />}
      </Card.Content>
    </Card>
  );
}

/**
   * render - return all the home page objects to be rendered.
   */
  render() {
    const { userInput } = this.state;

    return (
      <Grid celled className='search-grid'>

        <Grid.Row className='matches-grid-row'>
          <Grid.Column width={16}>

            <Card className='chatbot-container'>
              <Card.Content className='dialog-header'>
                <Card.Header>Document Search ChatBot</Card.Header>
              </Card.Content>
              <Card.Content>
                {this.getListItems()}
              </Card.Content>
              <Input
                icon='compose'
                iconPosition='left'
                value={userInput}
                placeholder='Enter response......'
                onKeyPress={this.handleKeyPress.bind(this)}
                onChange={this.handleOnChange.bind(this)}
              />
            </Card>

          </Grid.Column>
        </Grid.Row>

      </Grid>
    );
  }

render() {
    console.log('time')
    return (
      <Card.Content>
        <Icon name='clock outline' />
        <div id="timer">
          <span id="hours">{this.state.hoursUI}</span>
          <span id="mins">{this.state.minsUI}</span>
          <span id="seconds">{this.state.secondsUI}</span>
        </div>
      </Card.Content>
    );
  }

renderPage() {
    let teams;
    switch (this.state.select) {
      case 'skill':
        teams = this.bySkillMatch();
        break;
      case 'tool':
        teams = this.byToolMatch();
        break;
      case 'AToZ':
        teams = this.byAtoZ();
        break;
      case 'best':
        teams = this.byBestMatch();
        break;
      default:
        teams = this.byChallengeMatch();
    }
    return (
        <div style={{ paddingBottom: '50px', paddingTop: '40px' }}>
          <Container>
            <Segment style={paleBlueStyle}>
              <Header as={'h2'} textAlign="center">
                Open Teams
              </Header>
              <Card fluid>
                {this.renderDropDown()}
                <div style={{ paddingTop: '1rem', paddingBottom: '2rem' }}>
                  <ListTeamsWidget teams={teams} />
                </div>
              </Card>
            </Segment>
          </Container>
        </div>
    );
  }

TodoList = () => {
  const { loading, error, data } = useSubscription(GET_TODOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return (
    <Card.Group>
      {data.queryTodo.map(({ id, title, description, completed }) => (
        <Card>
          <Image
            src="/diggy.png"
            wrapped
            ui={false}
          />
          <Card.Content>
            <Card.Header>{title}</Card.Header>
            <Card.Meta>{completed ? "Done" : "Pending"}</Card.Meta>
            <Card.Description>{description}</Card.Description>
          </Card.Content>
        </Card>
      ))}
    </Card.Group>
  );
}

renderCards(){
        const items = [
            {
                header : this.props.manager,
                meta : 'Address of Manager',
                description : 'The manager created this Campaign and can request to withdraw money',
                style : { overflowWrap : 'break-word' }
            },
            {
                header : this.props.minimumContribution,
                meta : 'Minimum Contribution (wei)',
                description : 'You must contribute at least this much amount of wei to become an approver'
            },
            {
                header : this.props.requestsCount,
                meta : 'Number of  Requests',
                description : 'A requests to withdraw money from the contract. Requests must be approved by approvers'
            },
            {
                header : this.props.approversCount,
                meta : 'Number of Approvers',
                description : 'Number of people who have already donated to this campaign'
            },
            {
                header : web3.utils.fromWei(this.props.balance,'ether'),
                meta : 'Campaign Balance (ether)',
                description : 'The balance is how much money the campaign has left to spend'
            }
        ];
        return <Card.Group items={items} />;
    }

render() {
    let fRef = null;
    const model = this.props.participant;
    const schema = this.buildTheFormSchema();
    const formSchema = new SimpleSchema2Bridge(schema);
    const firstname = model.firstName;
    return (
        <Container style={{ paddingBottom: '50px', paddingTop: '40px' }}>
        <Segment style = { paleBlueStyle }>
          {/* eslint-disable-next-line max-len */}
          <Header as="h2" textAlign="center">Hello {firstname}, please fill out the form to
            suggest a new tool or skill. </Header>
          <Card fluid>
          <AutoForm ref={ref => {
            fRef = ref;
          }} schema={formSchema} onSubmit={data => this.submit(data, fRef)}>
            <Form.Group widths="equal" style={{ paddingRight: '10px', paddingLeft: '10px',
              paddingTop: '10px', paddingBottom: '10px' }}>
              <SelectField name="type" />
              <TextField name="name" />
              <TextField name="description" />
            </Form.Group>
            <SubmitField style={{
  display: 'block',
  marginLeft: 'auto', marginRight: 'auto', marginBottom: '10px',
}}/>
          </AutoForm>
          </Card>
        </Segment>
        </Container>
    );
  }

renderCampaigns(){
        const items = this.props.camapigns.map( address =>{
            return{
                header : address,
                description : (
                    <Link route={`/campaigns/${address}`}>
                        <a>View Campaign</a>
                    </Link>
                ),
                fluid : true
            };
        });

        return <Card.Group items={items} />;
    }

render() {
    return (
      <Container fluid className="dot-background-container">
        <Container fluid className="dot-background">
          <Container className="fs-landing-page-section">
            <Header
              as="h1"
              className="section-header highlight"
              textAlign="center"
            >
              Our services
            </Header>
            <Card.Group itemsPerRow={4} stackable>
              <Card className="info-card">
                <Card.Content>
                  <Card.Header className="advert">
                    <Icon name="book" /> Circulation
                  </Card.Header>
                  <Card.Description>
                    Browse our catalog on-line, request loan and pick it up in
                    the Library when your order is ready
                  </Card.Description>
                </Card.Content>
                <Button basic inverted>
                  Catalog
                </Button>
              </Card>
              <Card className="info-card">
                <Card.Content>
                  <Card.Header className="advert">
                    <AcquisitionOrderIcon /> Acquisition
                  </Card.Header>
                  <Card.Description>
                    If you think the library should buy literature, please let
                    us know. If you would like to buy a book we can order it for
                    you.
                  </Card.Description>
                </Card.Content>
                <Button basic inverted>
                  Request purchase
                </Button>
              </Card>
              <Card className="info-card">
                <Card.Content>
                  <Card.Header className="advert">
                    <Icon name="warehouse" /> Interlibrary loan
                  </Card.Header>
                  <Card.Description>
                    If you do not find a book, an article or other documents in
                    our catalog, we can see if an other library have it and do
                    an interlibrary loan for you.
                  </Card.Description>
                </Card.Content>
                <Button basic inverted>
                  Request ILL
                </Button>
              </Card>
              <Card className="info-card">
                <Card.Content>
                  <Card.Header className="advert">
                    <Icon name="desktop" /> Read online
                  </Card.Header>
                  <Card.Description>
                    We provide online access to some of our library resources:
                    articles, books, publications are available for you without
                    leaving your desk!
                  </Card.Description>
                </Card.Content>
                <Button basic inverted>
                  E-books catalog
                </Button>
              </Card>
            </Card.Group>
          </Container>
        </Container>
      </Container>
    );
  }

export default function Products() {
  const context = useContext(Context);
  const { user, products, getProducts } = context;

  const [currentPage, setCurrentPage] = useState(1);
  const [cardsPerPage, setCardsPerPage] = useState(6);

  useEffect(() => {
    getProducts();
  }, []);

  // Get current products
  const indexOfLastProduct = currentPage * cardsPerPage;
  const indexOfFirstProduct = indexOfLastProduct - cardsPerPage;
  const currentProducts = products.slice(
    indexOfFirstProduct,
    indexOfLastProduct
  );

  const views =
    products.length > 0 ? (
      currentProducts.map(product => <Product product={product} />)
    ) : (
      <Card>
        <Card.Content>
          <h2>Nothing here!</h2>
        </Card.Content>
      </Card>
    );

  const paginate = pageNumber => setCurrentPage(pageNumber);

  const pagination =
    products.length > cardsPerPage ? (
      <Pagination
        cardsPerPage={cardsPerPage}
        totalCards={products.length}
        paginate={paginate}
      />
    ) : null;

  const add = user ? user.admin ? <AddProductForm /> : null : null;

  return (
    <div>
      <Segment>
        <Grid>
          <Grid.Column floated="left" width={5}>
            <h1>Recent Products</h1>
          </Grid.Column>
          <Grid.Column floated="right" width={5}>
            {add}
          </Grid.Column>
        </Grid>
      </Segment>
      <Card.Group fluid itemsPerRow="3">
        {views}
      </Card.Group>
      <br />
      <center>{pagination}</center>
    </div>
  );
}

FilesAccess = ({ access, accessCommunity, metadataOnly }) => {
  const publicFiles = access.files === 'public';
  const publicMetadata = access.record === 'public';
  const publicCommunity = accessCommunity === 'public';

  const fullRecordRestricted = !publicCommunity || !publicMetadata;
  const filesRestricted = publicCommunity && !publicFiles && publicMetadata;

  const filesButtonsDisplayed =
    !metadataOnly && publicCommunity && publicMetadata;

  if (metadataOnly) {
    return (
      <Card.Meta data-testid="access-files">
        <em>{i18next.t('The record has no files.')}</em>
      </Card.Meta>
    );
  }

  return (
    <div data-testid="access-files">
      {filesButtonsDisplayed && (
        <>
          {i18next.t('Files only')}
          <ProtectionButtons
            active={publicFiles}
            disable={!publicCommunity}
            fieldPath="access.files"
          />
        </>
      )}
      {fullRecordRestricted && (
        <Card.Description>
          <em>{i18next.t('The full record is restricted.')}</em>
        </Card.Description>
      )}
      {filesRestricted && (
        <Card.Description>
          <em>{i18next.t('The files of this record are restricted.')}</em>
        </Card.Description>
      )}
    </div>
  );
}

NotificationPopup = ({
  dispatch,
  isOpen,
  children,
  notifications,
  allNotificationsCount
}) => {
  const notificationsFeed = notifications.map(notification => {
    if (notification.type === "like_post") {
      return postLikeNotification(notification);
    } else if (notification.type === "follow") {
      return followNotification(notification);
    } else if (notification.type === "post_comment") {
      return addCommentNotification(notification);
    } else if (notification.type === "comment_reply") {
      return commentReplyNotification(notification);
    } else if (notification.type === "comment_tagged") {
      return commentTaggedNotification(notification);
    } else if (notification.type === "post_tagged") {
      return postTaggedNotification(notification);
    } else if (notification.type === "like_commentReply") {
      return likeCommentReplyNotification(notification);
    } else {
      return commentLikeNotification(notification);
    }
  });
  const fetchData = () => {
    const lastId = notifications[notifications.length - 1]._id;
    dispatch(
      notificationActions.fetchNotifications({ initialFetch: false, lastId })
    );
  };
  return (
    <Popup
      trigger={children}
      on="click"
      position="top center"
      style={{ border: "none" }}
      open={isOpen}
    >
      <Grid centered divided columns="equal">
        <Card
          id="scrollableDiv"
          style={{ overflow: "auto", maxHeight: "300px" }}
        >
          <Card.Content>
            {" "}
            <InfiniteScroll
              dataLength={notificationsFeed.length} //This is important field to render the next data
              next={fetchData}
              scrollableTarget="scrollableDiv"
              hasMore={
                allNotificationsCount === notifications.length ? false : true
              }
              loader={<h4>Loading...</h4>}
              endMessage={
                <Divider horizontal>
                  <Header as="h5">Yay! You have seen it all</Header>
                </Divider>
              }
            >
              <Feed>{notificationsFeed} </Feed>
            </InfiniteScroll>
          </Card.Content>
        </Card>
      </Grid>
    </Popup>
  );
}

render() {
    const { results } = this.props;

    return (
      <div className="container">
        <Card.Group>
          {results.map((question, i) => {
            if (!question.answers) {
              return null;
            }

            return (
              <Card fluid className="qCard" key={i} id={`q_${question.id}`}>
                <CardLeftPanel title={question.title} questionNumber={i} />

                <List>
                  {question.answers.map((answer, index) => {
                    return (
                      <AnswerItem
                        answer={answer}
                        key={index}
                        question={question}
                        handleReportAnswer={this.handleReportAnswer}
                        handleClickLike={this.props.handleClickLike}
                        handleAnswerLike={this.props.handleAnswerLike}
                      />
                    );
                  })}
                </List>
                <div className="qPanelBottom">
                  <div className="buttonGroupCustom">
                    <LikeButton
                      onClick={this.props.handleClickLike(question.id, i)}
                      likes={question.like || 0}
                    />
                    {/*                     <ShareButton question={question}/> */}
                  </div>
                </div>
              </Card>
            );
          })}
        </Card.Group>
        <Modal open={this.state.open} onClose={this.close}>
          <Modal.Header>
            Are you sure you want to report this answer?
          </Modal.Header>
          <Modal.Content>
            <p>{this.state.reportAnswer && this.state.reportAnswer.title}</p>
          </Modal.Content>
          <Modal.Actions>
            <Button onClick={this.close} negative>
              No
            </Button>
            <Button
              positive
              onClick={this.handleSubmitReportIssue}
              labelPosition="right"
              icon="checkmark"
              content="Yes"
            />
          </Modal.Actions>
        </Modal>
      </div>
    );
  }

export function LocationFilter({ year, month, day }) {
  const [modalOpen, setModalOpen] = useState(false);
  const handleOpen = useCallback(() => setModalOpen(true), [setModalOpen]);
  const handleClose = useCallback(() => setModalOpen(false), [setModalOpen]);
  const history = useHistory();

  const handleDayClick = useCallback(
    date => {
      history.push(
        `/locations/${date.getFullYear()}-${date.getMonth() +
          1}-${date.getDate()}`
      );
      setModalOpen(false);
    },
    [history, setModalOpen]
  );

  const handleNextClick = useCallback(() => {
    const date = new Date(year, month - 1, day);
    history.push(getDateString(addDays(date, 1)));
  }, [year, month, day, history]);

  const handlePrevClick = useCallback(() => {
    const date = new Date(year, month - 1, day);
    history.push(getDateString(addDays(date, -1)));
  }, [year, month, day, history]);

  return (
    <>
      <Modal size="small" onClose={handleClose} open={modalOpen} basic>
        <Card centered raised>
          <Calendar
            value={new Date(year, month - 1, day)}
            onClickDay={handleDayClick}
          />
        </Card>
      </Modal>
      <Grid>
        <Grid.Column width={3}>
          <Button
            color="teal"
            icon="chevron left"
            fluid
            onClick={handlePrevClick}
          />
        </Grid.Column>
        <Grid.Column width={10}>
          <Button basic color="teal" onClick={handleOpen} fluid>
            <Icon name="calendar" />
            {new Date(
              Number(year),
              Number(month - 1),
              Number(day)
            ).toLocaleDateString()}
          </Button>
        </Grid.Column>
        <Grid.Column width={3}>
          <Button
            color="teal"
            icon="chevron right"
            fluid
            onClick={handleNextClick}
          />
        </Grid.Column>
      </Grid>
      <Divider />
    </>
  );
}

function ResultCard({
  fields: {
    id,
    title,
    timestamp,
    journal,
    doi,
    abstract,
    abstract_t5,
    body_text,
    authors,
    source,
    citations_count_total,
  },
  onSearchSimilar,
  isFieldSetAll,
}) {
  const content = formatText(abstract);
  const body = formatText(body_text);
  const plainTitle = title.replace(highlightRegex, '$1');
  return (
    <StyledCard>
      <Card.Header>
        <Link to={`/article/${id}`}>{plainTitle}</Link>
      </Card.Header>
      <Card.Meta>
        <JournalAndDate {...{ journal, timestamp }} />
        <DoiLink doi={doi} />
        <SourceAndCitations {...{ source, citations_count_total }} />
        <AuthorsList authors={authors} />
      </Card.Meta>
      {(content || onSearchSimilar) && (
        <Card.Content>
          {content && (
            <div>
              <Popup
                position="top center"
                content="This is a dynamic summary of the abstract of the paper, showing the matched query terms and surrounding context."
                trigger={<Label horizontal>Abstract</Label>}
              />
              {content}
            </div>
          )}
          {body && (
            <div>
              <Popup
                position="top center"
                content="This is a dynamic summary of the body of the paper, showing the matched query terms and surrounding context."
                trigger={<Label horizontal>Full Text</Label>}
              />
              {body}
            </div>
          )}
          {abstract_t5 && (
            <div>
              <Label horizontal>
                Machine Generated Summary
                <Explanation text="This is a short summary of the abstract, generated using a Natural Language Processing Model (T5)." />
              </Label>
              {formatText(abstract_t5)}
            </div>
          )}
          {onSearchSimilar && (
            <FunctionLink onClick={onSearchSimilar}>
              Search for similar articles
            </FunctionLink>
          )}
        </Card.Content>
      )}
    </StyledCard>
  );
}

function Login() {
  //router
  const history = useHistory();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const loginUser = (event) => {
    event.preventDefault();
    if (email && password) {
      auth
        .signInWithEmailAndPassword(email, password)
        .then((authUser) => {
          history.push("/");
        })
        .catch((error) => {
          alert(
            "Opps! something went wrong please check your console for more info"
          );
          console.error(error.message);
        });
    } else {
      alert("Please Enter all the fields");
    }
  };

  return (
    <div className="login">
      <Container>
        <Grid centered columns={3} doubling stackable>
          <Grid.Column>
            <h2>Sign In</h2>

            <Card>
              <Form className="login__form">
                <Form.Field required>
                  <label>E-mail</label>
                  <input
                    placeholder="First Name"
                    type="email"
                    onChange={(event) => setEmail(event.target.value)}
                  />
                </Form.Field>
                <Form.Field required>
                  <label>Password</label>
                  <input
                    placeholder="password"
                    type="password"
                    onChange={(event) => setPassword(event.target.value)}
                  />
                </Form.Field>
                <Button color="green" type="submit" onClick={loginUser}>
                  Login
                </Button>
              </Form>
            </Card>
          </Grid.Column>
        </Grid>
      </Container>
    </div>
  );
}