semantic-ui-react#Icon JavaScript Examples

ErrorMessage = (props) => {
  const { header, body } = props;
  return (
    <Grid.Row>
      <Message icon color="yellow">
        <Icon name="exclamation circle" />
        <Message.Content>
          <Message.Header>{header}</Message.Header>
          <p>{body}</p>
        </Message.Content>
      </Message>
      <Divider hidden />
    </Grid.Row>
  );
}

renderMinorCFParticipants() {
    const MinorCFParticipantsID = this.getMinorCFParticipants();
    if (MinorCFParticipantsID.length === 0) {
      return (
          <div align={'center'}>
            <Header as='h2' icon>
              <Icon name='birthday cake' />
              There are no minor participants yet
              <Header.Subheader>
                Please check back later.
              </Header.Subheader>
            </Header>
          </div>
      );
    }

    return <div><UpdateMinorParticipantsWidget MinorParticipantsID={MinorCFParticipantsID} /></div>;

  }

function LikeButton({ user, post: { id, likeCount, likes } }) {
  const [liked, setLiked] = useState(false);

  useEffect(() => {
    if (user && likes.find((like) => like.username === user.username)) {
      setLiked(true);
    } else setLiked(false);
  }, [user, likes]);

  const [likePost] = useMutation(LIKE_POST_MUTATION, {
    variables: { postId: id }
  });

  const likeButton = user ? (
    liked ? (
      <Button color="pink" >
        <Icon name="heart" />
      </Button>
    ) : (
      <Button color="pink" basic>
        <Icon name="heart" />
      </Button>
    )
  ) : (
    <Button as={Link} to="/login" color="pink" basic>
      <Icon name="heart" />
    </Button>
  );

  return (
    <Button as="div" labelPosition="right" onClick={likePost}>
      <MyPopup content={liked ? 'Unlike' : 'Like'}>{likeButton}</MyPopup>
      <Label basic color="pink" pointing="left">
        {likeCount}
      </Label>
    </Button>
  );
}

render() {
    let buttonstate;
    let progressbar;
    if (100 > this.state.percent && this.state.percent > 0 ) { 
      buttonstate = 
        <Message icon>
          <Icon name='circle notched' loading />
          <Message.Content>
            <Message.Header>Uploading</Message.Header>
            <p>{this.state.filename}</p>
          </Message.Content>
        </Message>;
      progressbar = <Progress percent={this.state.percent} indicating progress='percent'/>;
    }
    else if (100 === this.state.percent){
      buttonstate = null;
      progressbar = null;
    }
    else { 
      buttonstate = 
        <input
          type="file" accept='text/csv'
          onChange={(e) => this.onChange(e)}
        />;
      progressbar = <Progress percent={this.state.percent} indicating progress='percent'/>;
    }



    return (
        <div>
          {progressbar}
          {this.state.result}
          {buttonstate}
        </div>
    )
  }

function BalanceAnnotation (props) {
  const { accountSelected } = props;
  const { api } = useSubstrate();
  const [accountBalance, setAccountBalance] = useState(0);

  // When account address changes, update subscriptions
  useEffect(() => {
    let unsubscribe;

    // If the user has selected an address, create a new subscription
    accountSelected &&
      api.query.balances.freeBalance(accountSelected, balance => {
        setAccountBalance(balance.toString());
      }).then(unsub => {
        unsubscribe = unsub;
      }).catch(console.error);

    return () => unsubscribe && unsubscribe();
  }, [accountSelected, api.query.balances]);

  return accountSelected
    ? <Label pointing='left'>
      <Icon
        name='money bill alternate'
        color={accountBalance > 0 ? 'green' : 'red'}
      />
      {accountBalance}
    </Label>
    : null;
}

//List => Panel => ItemView

export default function PostList(props) {
  return (
    <div>
      <Header as="h1" icon>
        <Header.Content>All Tags</Header.Content>
      </Header>
      <div>
        {props.tags &&
          props.tags.map((item) => (
            <Link
              key={item._id}
              href={`/blog/tags/[slug]`}
              as={`/blog/tags/${item.slug}`}
            >
              <Label as="a">
                <Icon name="tag" /> {item.name}
              </Label>
            </Link>
          ))}
      </div>
    </div>
  );
}

EmailLink = ({
  bcc,
  body,
  cc,
  children,
  email,
  subject,
  asButton,
  ...buttonUIProps
}) => {
  const params = [];
  if (bcc) params.push(`bcc=${encodeURIComponent(bcc)}`);
  if (body) params.push(`body=${encodeURIComponent(body)}`);
  if (cc) params.push(`cc=${encodeURIComponent(cc)}`);
  if (subject) params.push(`subject=${encodeURIComponent(subject)}`);

  const url = params ? email + '?' + params.join('&') : email;

  return asButton ? (
    <Button as="a" href={`mailto:${url}`} {...buttonUIProps}>
      <Icon name="envelope" />
      {children}
    </Button>
  ) : (
    <a href={`mailto:${url}`}>{children || email}</a>
  );
}

DepositStatusBoxComponent = ({ depositReview, depositStatus }) => {
  const status = STATUSES[depositStatus];
  if (!status) {
    throw new Error('Status is undefined');
  }
  const isReviewStatus = depositStatus === DepositStatus.IN_REVIEW;

  return (
    <Grid verticalAlign="middle">
      <Grid.Row centered className={`pt-5 pb-5 ${status.color}`}>
        <Grid.Column
          width={isReviewStatus ? 8 : 16}
          textAlign={isReviewStatus ? 'left' : 'center'}
        >
          <span>{status.title}</span>
          <Popup
            trigger={<Icon className="ml-10" name="info circle" />}
            content={status.message}
          />
        </Grid.Column>
        {isReviewStatus && (
          <Grid.Column width={8} textAlign="right">
            <Button
              href={`/me/requests/${depositReview.id}`}
              target="_blank"
              icon="external alternate"
              content={i18next.t('View request')}
              size="mini"
              className="transparent"
              title={i18next.t('Opens in new tab')}
            />
          </Grid.Column>
        )}
      </Grid.Row>
    </Grid>
  );
}

render() {
    const { htmlFor, icon, label, className } = this.props;
    return (
      <label htmlFor={htmlFor} className={className}>
        {icon ? <Icon name={icon} /> : null}
        {label}
      </label>
    );
  }

columns = [
  {
    key: "prop",
    header: "Prop",
    width: 170,
    content: ({ row }) => <code>{row.prop}</code>
  },
  {
    key: "type",
    header: "Type",
    minWidth: 120,
    maxWidth: 170,
    content: ({ row }) => <code>{row.type}</code>
  },
  {
    key: "required",
    header: "Required",
    width: 100,
    content: ({ row }) => (
      <Icon
        name={`${row.required ? "check" : "times"} circle`}
        color={row.required ? "green" : "grey"}
      />
    )
  },
  {
    key: "default",
    header: "Default",
    width: 100,
    content: ({ row }) => (row.default ? <code>{row.default}</code> : null)
  },
  {
    key: "description",
    header: "Description",
    content: ({ row }) => row.description
  }
]

ViewTeam = ({ isCompliant, participants, teamChallenges, team, teamMembers }) => {
  const allParticipants = participants;
  const captain = allParticipants.filter(p => team.owner === p._id)[0];
  const challenge = teamChallenges[0];

  function changeBackground(e) {
    e.currentTarget.style.backgroundColor = '#fafafa';
    e.currentTarget.style.cursor = 'pointer';
  }

  function onLeave(e) {
    e.currentTarget.style.backgroundColor = 'transparent';
  }

  // console.log(team, captain, teamChallenges);
  return (
      <Item onMouseEnter={changeBackground} onMouseLeave={onLeave}
            style={{ padding: '1.0rem 1.5rem 1.0rem 1.5rem' }}>
        <Modal closeIcon trigger={
          <Item.Content>
            <Item.Header>
              {team.name} {isCompliant ? <Icon className="green check"/> : <Icon name="exclamation circle"
                                                                                 color="red"/> }
            </Item.Header>
            <Item.Description>
              <strong>Captain:</strong> {captain ? `${captain.firstName} ${captain.lastName}: ${captain.username}   `
                : '   '},
              <strong>Challenge:</strong> {challenge.title}
            </Item.Description>
          </Item.Content>
            }>
          <Grid padded>
            <Grid.Row>
              <Grid.Column width={4}>
                <Header>{team.name}</Header>
                <List>
                  {teamChallenges.map((c) => <List.Item key={c._id}>{c.title}</List.Item>)}
                </List>
                <Header as="h4">Captain</Header>
                {captain ? `${captain.firstName} ${captain.lastName}: ${captain.username}` : ''}
              </Grid.Column>
              <Grid.Column width={5}>
                <Header>Members</Header>
                <List bulleted>
                  {teamMembers.map((t) => <List.Item key={t}>{t}</List.Item>)}
                </List>
              </Grid.Column>
              <Grid.Column width={5}>
                {isCompliant ? <Header>Team is Compliant</Header> : <Header>
                  <mark>Team is not Compliant</mark>
                </Header>}
                <Header>Devpost Page</Header>
                {team.devPostPage}
                <Header>Github Repo</Header>
                {team.gitHubRepo}
              </Grid.Column>
              <Grid.Column width={2}>
                {/* eslint-disable-next-line max-len */}
                <Button><Link to={`/admin-edit-team/${team._id}`}
                              style={{ color: 'rgba(0, 0, 0, 0.6)' }}>Edit</Link></Button>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Modal>
      </Item>
  );
}

function DeleteButton({ postId, commentId, callback }) {
  const [confirmOpen, setConfirmOpen] = useState(false);

  const mutation = commentId ? DELETE_COMMENT_MUTATION : DELETE_POST_MUTATION;

  const [deletePostOrMutation] = useMutation(mutation, {
    update(proxy) {
      setConfirmOpen(false);
      if (!commentId) {
        const data = proxy.readQuery({
          query: FETCH_POSTS_QUERY
        });
        data.getPosts = data.getPosts.filter((p) => p.id !== postId);
        proxy.writeQuery({ query: FETCH_POSTS_QUERY, data });
      }
      if (callback) callback();
    },
    variables: {
      postId,
      commentId
    }
  });
  return (
    <>
      <MyPopup content={commentId ? 'Delete comment' : 'Delete post'}>
        <Button
          as="div"
          color="red"
          floated="right"
          onClick={() => setConfirmOpen(true)}
        >
          <Icon name="trash" style={{ margin: 0 }} />
        </Button>
      </MyPopup>
      <Confirm
        open={confirmOpen}
        onCancel={() => setConfirmOpen(false)}
        onConfirm={deletePostOrMutation}
      />
    </>
  );
}

function Header() {
  const [{ basket, user }] = useStateValue();

  const login = () => {
    if (user) {
      auth.signOut();
    }
  };

  return (
    <div className="header">
      <Menu stackable>
        <Menu.Menu position="left">
          <Menu.Item>
            <Link to="/" className="header__leftItem">
              <img
                className="header__logo"
                src="https://img.icons8.com/ios/100/000000/online-shop-favorite.png"
                alt="secondhand store logo"
              />
              <p className="header__companyName">Second-hand Store</p>
            </Link>
          </Menu.Item>
        </Menu.Menu>
        <Menu.Menu position="right">
          <Link to="/uploadImage">
            <Menu.Item>
              <Icon name="upload" /> Add product
            </Menu.Item>
          </Link>
          <Link to="/checkout">
            <Menu.Item>
              <Icon name="shop" /> {basket?.length}
            </Menu.Item>
          </Link>
          <Link to="/login">
            <Menu.Item>
              {user ? (
                <div onClick={login}>
                  <Icon name="sign-out" />
                  Logout
                </div>
              ) : (
                <>
                  <Icon name="sign-in" />
                  Sign in
                </>
              )}
            </Menu.Item>
          </Link>
        </Menu.Menu>
      </Menu>
    </div>
  );
}

render() {
        return (
            <Modal
                as={Form}
                onSubmit={this.handleSubmit}
                style={{ maxWidth: 500 }}
                onClose={() => this.setState(initialState)}
                onOpen={() => this.setState({open: true})}
                open={this.state.open}
                trigger={
                    <Button
                        floated='right'
                        icon
                        labelPosition='left'
                        primary
                        size='small'
                    >
                        <Icon name='add circle' /> Add Abbreviation
                    </Button>
                }
            >
                <Header as='h2' color='blue' textAlign='center'>
                    Add a new Medical Abbreviation
                </Header>
                <Modal.Content>
                    <Form.Field
                        fluid
                        control={Input}
                        name='abbrev'
                        label='Medical Abbreviation'
                        value={this.state.abbrev}
                        onChange={this.handleChange}
                    />
                    <Form.Field
                        fluid
                        control={Input}
                        name='meaning'
                        label='Meaning'
                        value={this.state.meaning}
                        onChange={this.handleChange}
                    />
                </Modal.Content>
                <Modal.Actions>
                    <Button
                        color='black'
                        content='Cancel'
                        onClick={() => this.setState(initialState)}
                    />
                    <Button
                        type='submit'
                        content="Add Word Weight"
                        color='blue'
                        disabled={!this.state.abbrev || !this.state.meaning}
                    />
                </Modal.Actions>
            </Modal>
        )
    }

render() {
    const { activeItem, redirect, activeItemPath } = this.state;

    if (redirect) {
      this.setState({ redirect: false });
      return <Redirect to={activeItemPath} />;
    }

    return (
      <Menu size="massive" stackable inverted>
        <Menu.Item href="https://adasteam.ca/" target="_blank">
          <img src={AdaBotHead} alt="Ada's Bot Head" />
        </Menu.Item>

        <Menu.Item
          name="home"
          active={activeItem === "home"}
          onClick={this.handleItemClick}
        >
          Home
        </Menu.Item>

        <Menu.Item
          name="candidates"
          active={activeItem === "candidates"}
          onClick={this.handleItemClick}
        >
          Candidates
        </Menu.Item>

        <Menu.Item
          name="results"
          active={activeItem === "results"}
          onClick={this.handleItemClick}
        >
          Results
        </Menu.Item>
        <Menu.Item
          position="right"
          href="https://github.com/adas-team/ElectionsApp"
          target="_blank"
        >
          {/* <img src={AdaBotHead} alt="Ada's Bot Head" /> */}
          <Icon name="github" size="large" />
        </Menu.Item>
      </Menu>
    );
  }

ContactsDisplay = ({
  contacts,
  setContacts,
  search,
  options,
  handleOptionAddition,
  notify,
  isLoading,
  isDarkMode,
}) => {
  const filterByName = (contact, search) => {
    return contact.name.toLowerCase().includes(search.toLowerCase());
  };

  const filterByProfileLinks = (contact, search) => {
    const urlsArray = contact.contacts.map((c) => c.url);

    return urlsArray.find((u) =>
      u.toLowerCase().includes(search.toLowerCase())
    );
  };

  const contactsToDisplay = contacts.filter(
    (c) => filterByName(c, search) || filterByProfileLinks(c, search)
  );

  return (
    <div className="contacts-display">
      {search !== '' && contactsToDisplay.length !== 0 && (
        <Header className={isDarkMode ? 'dark-mode-info-text' : ''}>
          <Icon name="searchengin" />
          Showing search results for query "{search}"
        </Header>
      )}
      {search !== '' && contactsToDisplay.length === 0 && (
        <Header
          textAlign="center"
          as="h2"
          className={isDarkMode ? 'dark-mode-info-text main-text' : 'main-text'}
        >
          <Icon name="searchengin" />
          Search: No matches found for "{search}"
        </Header>
      )}
      {!isLoading && search === '' && contactsToDisplay.length === 0 && (
        <Header
          textAlign="center"
          as="h2"
          className={isDarkMode ? 'dark-mode-info-text main-text' : 'main-text'}
        >
          <Icon name="info" />
          No contacts added yet.
        </Header>
      )}
      {isLoading ? (
        <ContactsLoader isDarkMode={isDarkMode} />
      ) : (
        contactsToDisplay.map((contact) => (
          <ContactCard
            contact={contact}
            contacts={contacts}
            setContacts={setContacts}
            options={options}
            handleOptionAddition={handleOptionAddition}
            key={contact.id}
            notify={notify}
            isDarkMode={isDarkMode}
          />
        ))
      )}
    </div>
  );
}

render() {
    //console.log("this.items");
    //console.log(this.state.items);

    var tableitems = this.state.items.sort( compare );
    var tablerows = tableitems.map(function (item, i) {
      let toggleEnabled;
      if (item.enabled === "0"){
        toggleEnabled = <Checkbox toggle checked={false} onChange={(event) => this.onEnabledClickHandler(item, i, event, "1")} /> // click enables "1"
      };
      if (item.enabled === "1") { 
        toggleEnabled = <Checkbox toggle checked={true} onChange={(event) => this.onEnabledClickHandler(item, i, event, "0")} />  // click disabled "0"
      }; 
      return <Table.Row key={i} >
        <Table.Cell collapsing>{item.telephoneNumber}</Table.Cell>
        <Table.Cell>{item.firstName} {item.lastName}</Table.Cell>
        <Table.Cell>{toggleEnabled}</Table.Cell>
        <Table.Cell><Button negative circular icon='delete' onClick={(event) => this.onDeleteClickHandler(item, i, event)}/></Table.Cell>
      </Table.Row>
    }.bind(this));

    var leftDisabled = false
    var rightDisabled = false
    if(this.state.scanIndexForward === false && this.state.lastEvaluatedKey === ""){leftDisabled = true} else {leftDisabled = false};
    if(this.state.scanIndexForward === true  && this.state.lastEvaluatedKey === ""){rightDisabled = true} else {rightDisabled = false};
    if(this.state.pageturns < 2){leftDisabled = true} // handle just started use case


    const table =
    <div>
      <Table celled striped>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Telephone</Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell><Checkbox toggle checked={this.state.filterEnabled} onClick={(event) => this.onFilterEnabledClickHandler()}/> Enabled</Table.HeaderCell>
            <Table.HeaderCell>Delete</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {tablerows}
        </Table.Body>
      </Table>
      
      <Button icon labelPosition='left' onClick={(event) => this.componentDidMount(true)} disabled={leftDisabled}><Icon name='left arrow' />Back</Button>
      <Button icon labelPosition='right' onClick={(event) => this.componentDidMount(false)} disabled={rightDisabled}>Next<Icon name='right arrow' /></Button>
    </div>
    return table;
  }

export default function ContactCard({contact}) {
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  const deleteContact = async id => {
    try {
      const response = await axios.delete(`http://localhost:3030/contacts/${id}`);
      dispatch({
        type: "DELETE_CONTACT",
        payload: response.data
      });
    } catch (error) {
      flashErrorMessage(dispatch, error)
    }
  }

  return (
    <Card>
      <Card.Content>
        <Card.Header>
          <Icon name='user outline'/> {contact.name.first} {contact.name.last}
        </Card.Header>
        <Card.Description>
          <p><Icon name='phone'/> {contact.phone}</p>
          <p><Icon name='mail outline'/> {contact.email}</p>
        </Card.Description>
      </Card.Content>
      <Card.Content extra>
        <div className="ui two buttons">
          <Button basic color="green" as={Link} to={`/contacts/edit/${contact._id}`}>
            Edit
          </Button>
          <Button basic color="red" onClick={() => deleteContact(contact._id)}>
            Delete
          </Button>
        </div>
      </Card.Content>
    </Card>
  )
}

export default function ContactTable() {
  // Subscribe to `contacts` state and access dispatch function
  const [state, dispatch] = useContext(ContactContext);
  // Declare a local state to be used internally by this component
  const [selectedId, setSelectedId] = useState();

  const delContact = id => {
    dispatch({
      type: "DEL_CONTACT",
      payload: id
    });
  };

  const onRemoveUser = () => {
    delContact(selectedId);
    setSelectedId(null); // Clear selection
  };

  const rows = state.contacts.map(contact => (
    <Table.Row
      key={contact.id}
      onClick={() => setSelectedId(contact.id)}
      active={contact.id === selectedId}
    >
      <Table.Cell>{contact.id}</Table.Cell>
      <Table.Cell>{contact.name}</Table.Cell>
      <Table.Cell>{contact.email}</Table.Cell>
    </Table.Row>
  ));

  return (
    <Segment>
      <Table celled striped selectable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>{rows}</Table.Body>
        <Table.Footer fullWidth>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell colSpan="4">
              <Button
                floated="right"
                icon
                labelPosition="left"
                color="red"
                size="small"
                disabled={!selectedId}
                onClick={onRemoveUser}
              >
                <Icon name="trash" /> Remove User
              </Button>
            </Table.HeaderCell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </Segment>
  );
}

export default function AccountSelector (props) {
  const { api, keyring } = useSubstrate();
  const { setAccountAddress } = props;
  const [accountSelected, setAccountSelected] = useState('');

  // Get the list of accounts we possess the private key for
  const keyringOptions = keyring.getPairs().map(account => ({
    key: account.address,
    value: account.address,
    text: account.meta.name.toUpperCase(),
    icon: 'user'
  }));

  const initialAddress =
    keyringOptions.length > 0 ? keyringOptions[0].value : '';

  // Set the initial address
  useEffect(() => {
    setAccountSelected(initialAddress);
    setAccountAddress(initialAddress);
  }, [setAccountAddress, initialAddress]);

  const onChange = address => {
    // Update state with new account address
    setAccountAddress(address);
    setAccountSelected(address);
  };

  return (
    <Menu
      attached='top'
      tabular
      style={{
        backgroundColor: '#fff',
        borderColor: '#fff',
        paddingTop: '1em',
        paddingBottom: '1em'
      }}
    >
      <Container>
        <Menu.Menu>
          <Image src='Substrate-Logo.png' size='mini' />
        </Menu.Menu>
        <Menu.Menu position='right'>
          <Icon
            name='users'
            size='large'
            circular
            color={accountSelected ? 'green' : 'red'}
          />
          <Dropdown
            search
            selection
            clearable
            placeholder='Select an account'
            options={keyringOptions}
            onChange={(_, dropdown) => { onChange(dropdown.value); }}
            value={accountSelected}
          />
          {api.query.balances && api.query.balances.freeBalance
            ? <BalanceAnnotation accountSelected={accountSelected} />
            : null}
        </Menu.Menu>
      </Container>
    </Menu>
  );
}

Header = () => {
  const { user, signOut, isReady } = useContext(UserContext);

  return (
    <Menu fixed="top" inverted borderless size="huge" className="scroll">
      <Container>
        <Menu.Item header key="menu-0">
          <Link href="/">
            <a>
              <Icon name="world" /> {process.env.NEXT_PUBLIC_SITE_NAME}
            </a>
          </Link>
        </Menu.Item>

        <Menu.Item key="menu-1a">
          <Link href="/blog">
            <a>Blog</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="menu-1b">
          <Link href="/playground">
            <a>Playground</a>
          </Link>
        </Menu.Item>

        <Menu.Item key="menu-1d">
          <Link href="/about">
            <a>About Us</a>
          </Link>
        </Menu.Item>

        {isReady &&
          user && [
            <Menu.Item key="menu-2">
              <Link href="/dashboard">
                <a>Dashboard</a>
              </Link>
            </Menu.Item>,
            <Menu.Item position="right" key="menu-3">
              <Icon disabled name="user" />
              {user}
              <button
                type="button"
                className="link-button"
                style={{ paddingLeft: "10px", color: "#fff" }}
                onClick={signOut}
              >
                <Icon disabled name="sign out" />
              </button>
            </Menu.Item>,
          ]}
        {isReady && !user && (
          <Menu.Item position="right" key="menu-3">
            <Icon disabled name="user" />
            <Link href="/signin">
              <a>Login</a>
            </Link>
          </Menu.Item>
        )}
      </Container>
    </Menu>
  );
}

render () {
    const { name, keywords, enabled, stats } = this.props;
    return (
      <div>

        <Container textAlign='center'>
          <Button floated='left' circular icon='cog' onClick={this.onSettings} />
          <Button floated='right' circular icon='sign out' onClick={this.onLogout} />
          <Checkbox toggle disabled={!keywords} defaultChecked={Boolean(enabled)} onChange={this.onCheck} />
        </Container>

        <Segment textAlign='center'>

          {!name && !keywords &&
          <Placeholder fluid>
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
            <Placeholder.Line />
          </Placeholder>
          }

          {name &&
          <Header as='h4'>
            <Icon name='user' />{name}
          </Header>
          }

          {keywords && keywords.map((v, i) =>
            <Label color='red' tag>
              {v}
              {stats &&
                <Label.Detail>{stats[i]}</Label.Detail>
              }
            </Label>
          )}
        
        </Segment>

      </div>
    );
  }

ConfirmEmailLayout = ({
  isConfirmed,
  isConfirmedLoading,
  backgroundImage,
}) => {
  return (
    <Overridable
      id="ConfirmEmail.layout"
      isConfirmed={isConfirmed}
      isConfirmedLoading={isConfirmedLoading}
      backgroundImage={backgroundImage}
    >
      <Container
        fluid
        className="auth-page blur"
        style={{
          backgroundImage: backgroundImage ? `url(${backgroundImage})` : null,
        }}
      >
        <Container padded>
          <Segment
            className="background-transparent pb-default pt-default"
            color="orange"
          >
            <Header as="h1">E-mail confirmation</Header>
            <Loader
              isLoading={isConfirmedLoading}
              renderElement={() => (
                <UILoader active indeterminate size="large" inline="centered">
                  Waiting for e-mail confirmation...
                </UILoader>
              )}
            >
              {isConfirmed ? (
                <Message icon positive size="big">
                  <Icon name="check" />

                  <Message.Content>
                    <Message.Header>Your are all set!</Message.Header>
                    Your email has been confirmed. Go back to the{' '}
                    <Link className="alternative" to={FrontSiteRoutes.home}>
                      home page
                    </Link>{' '}
                    to browse the library catalogue
                  </Message.Content>
                </Message>
              ) : (
                <Message icon negative size="big">
                  <Icon name="warning" />

                  <Message.Content>
                    <Message.Header>Oh snap!</Message.Header>
                    Your e-mail could <strong>not</strong> be confirmed. Please
                    contact the library.
                  </Message.Content>
                </Message>
              )}
            </Loader>
          </Segment>
        </Container>
      </Container>
    </Overridable>
  );
}