semantic-ui-react#Header JavaScript Examples

render() {
    const { error, smart, patient } = this.props;
    return (
      <Router history={history}>
        <Helmet />
        <Container style={{ marginTop: '2rem' }}>
          <Grid columns="1" stackable>
            <Grid.Column>
              {error ? <ErrorMessage {...error} /> : null}
              {patient ? <SuccessMessage patient={patient} user={smart.user} /> : null}
              <Grid.Row>
                <Header as="h1">FHIR App Starter</Header>
                <Divider />
              </Grid.Row>

              <Grid.Row>
                <Information />
              </Grid.Row>

              <Grid.Row>
                <Divider />
              </Grid.Row>

              {smart ? (
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
              ) : null}
            </Grid.Column>
          </Grid>
        </Container>
      </Router>
    );
  }

render() {
    // console.log(this.props);
    return (
        <Item
              style={{ padding: '0rem 2rem 2rem 2rem' }}>
            <Item.Content>
              <Item.Header>
                <Header as={'h3'} style={{ color: '#263763', paddingTop: '2rem' }}>
                  {this.props.name}
                </Header>
              </Item.Header>
              <Item.Meta>
                {this.props.type}
              </Item.Meta>
              <Item.Description>
                {this.props.description}
              </Item.Description>
              <Item.Extra>Suggested By: {this.props.username} </Item.Extra>
              <Button negative onClick={() => this.removeItem()}>Delete</Button>
              <Button positive onClick={() => this.addSuggestion(this.props.type,
                  this.props.name, this.props.description, this.props.suggestionObj._id)}>Add Suggestion</Button>
            </Item.Content>
        </Item>
    );
  }

function Bookmarked({bookmarked, setBookmarked}) {

    const descendingSortByYear = (resultList) =>{
        return resultList.sort( (a,b) => { 
            return (b.year.length - a.year.length)
          });
      }

    return (
    <React.Fragment>
      <Container id='mainContainer' fluid>
        <Header id='mainHeader' as='h1' textAlign='center'>
          GSoC Analyzer
        </Header>
      <Link to="/" className="nav-button">Home</Link>

        <Container fluid style={{ paddingTop: 50 }}>
            <Header
              style={{ color: 'white', fontSize: 50 }}
              textAlign='center'
              as='h1'
            >
              Bookmarked Organizations: {bookmarked.length}
            </Header>
            <br />
            {bookmarked.length != 0 ? descendingSortByYear(bookmarked).map((org, index) => (
              <OrganisationCard key={index} orgData={org} bookmarked={bookmarked} setBookmarked={setBookmarked} />
            )) : 
            <div className="no-bookmarks-msg">
              No organizations bookmarked yet
            </div>}
          </Container>
        <ScrollUpButton style={{ color: 'white' }} />
        <Footer />
      </Container>
    </React.Fragment>
    )
}

render() {
        return (
            <Grid textAlign='center' verticalAlign='middle'>
                <Grid.Column style={{ maxWidth: 600 }}>
                    <Segment inverted color='blue'>
                        <Header as='h2' color='white' textAlign='center'>
                            Synonyms
                        </Header>
                        <p> Add words to the synonym dictionary! Synonym declarations must be formatted according to the PostgreSQL
                            thesaurus dictionary configuration file. In other words, each synonym must be declared in one line,
                            and must be formatted like this: </p>
                        <p> sample word(s) : indexed word(s) </p>
                        <Form inverted color='blue' loading={this.state.loading} onSubmit={this.handleSubmit}>
                            <Form.Field
                                fluid
                                control={TextArea}
                                rows='20'
                                name='fileContents'
                                value={this.state.fileContents}
                                onChange={this.handleChange}
                            />
                            <Form.Button color='black' content='Submit'/>
                        </Form>
                    </Segment>
                </Grid.Column>
            </Grid>
        )
    }

ExampleAlgoSigner = ({title, buttonText, buttonAction}) => {
  const [result, setResult] = useState("");

  const onClick = useCallback(async () => {
    const r = await buttonAction();
    setResult(r);
  }, [buttonAction]);

  return (
    <>
      <Header as="h2" dividing>{title}</Header>
      <Button primary={true} onClick={onClick}>{buttonText}</Button>
      <Message>
        <code>
          {result}
        </code>
      </Message>
    </>
  );
}

DisplayPictureModal = ({ imageLink, contactName, isDarkMode }) => {
  const [open, setOpen] = useState(false);

  return (
    <Modal
      closeIcon
      open={open}
      trigger={
        <Image
          avatar
          style={{ width: '49px', height: '49px' }}
          src={getCircularAvatar(imageLink)}
          className="avatar-image"
        />
      }
      onClose={() => setOpen(false)}
      onOpen={() => setOpen(true)}
      className={isDarkMode ? 'dark-mode-modal' : ''}
    >
      <Header icon="picture" content={`DP Preview: ${contactName}`} />
      <Modal.Content>
        <Image
          src={imageLink}
          size="large"
          rounded
          className="avatar-preview"
        />
      </Modal.Content>
    </Modal>
  );
}

export default function Contacts() {
  return (
    <ContactContextProvider>
      <Segment basic>
        <Header as="h3">Contacts</Header>
        <ContactForm />
        <ContactTable />
      </Segment>
    </ContactContextProvider>
  );
}

//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>
  );
}

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 { token } = this.props;
    const View = token? Authed : Unauthed;
    return (
      <div className='App'>
        <Header as='h3' attached='top' textAlign='center' inverted color='teal'>
          Keyword Marker
        </Header>
        <div className='App-view'>
          <View {...this.props}/>
        </div>
      </div>
    );
  }

LeftCol = () => (
  <Grid.Column width={8} textAlign="center" only="tablet computer">
    <Grid textAlign="center" columns={2} className="default-margin">
      <Grid.Row>
        <Grid.Column stretched width={8} textAlign="right">
          <Header className="inline-block massive">Hello!</Header>
        </Grid.Column>
        <Grid.Column width={8} textAlign="left">
          <Grid.Row>
            <Grid.Column width={16}>
              <Header as="h5" className="inline-block greetings">
                Ciao!
              </Header>{' '}
              <Header as="h5" className="inline-block greetings">
                Γεια σας!
              </Header>{' '}
              <Header as="h5" className="inline-block greetings">
                Hej!
              </Header>
            </Grid.Column>
            <Grid.Column>
              <Header as="h5" className="inline-block greetings">
                Cześć!
              </Header>{' '}
              <Header as="h5" className="inline-block greetings">
                Salut!
              </Header>{' '}
              <Header as="h5" className="inline-block greetings">
                Alo!
              </Header>
            </Grid.Column>
          </Grid.Row>
        </Grid.Column>
      </Grid.Row>
    </Grid>
    {invenioConfig.APP.ENABLE_LOCAL_ACCOUNT_LOGIN && <SignUp />}
  </Grid.Column>
)

// Render the form. Use Uniforms: https://github.com/vazco/uniforms
  render() {
    const formSchema = new SimpleSchema2Bridge(schema);
    const memberNamesAndGitHub = _.map(this.props.members, (p) => {
      const fullName = Participants.getFullName(p._id);
      const gitHub = p.gitHub;
      return `${fullName}, (${gitHub})`;
    });
    return (
        <Grid container centered>
          <Grid.Column>
            <div style={{
              backgroundColor: '#E5F0FE', padding: '1rem 0rem', margin: '2rem 0rem',
              borderRadius: '2rem',
            }}>
              <Header as="h2" textAlign="center">Edit Team</Header>
            </div>
            <AutoForm schema={formSchema} onSubmit={data => this.submit(data)} model={this.props.team}
                      style={{
                        paddingBottom: '4rem',
                      }}>
              <Segment style={{
                borderRadius: '1rem',
                backgroundColor: '#E5F0FE',
              }} className={'teamCreate'}>
                <Grid container centered>
                  <Grid.Column style={{ paddingLeft: '3rem', paddingRight: '3rem' }}>
                    <TextField name='name' disabled />
                    <LongTextField name='description' required/>
                    <Header as="h4">Team Members:</Header>
                    <List>
                      {memberNamesAndGitHub.map((n) => <List.Item key={n}>{n}</List.Item>)}
                    </List>
                    <TextField name='gitHubRepo' required/>
                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '2rem 0rem',
                               }}/>
                </div>
                <ErrorsField/>
              </Segment>
            </AutoForm>
          </Grid.Column>
        </Grid>
    );
  }