semantic-ui-react#Container 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);
    const model = this.buildTheModel();
    return (
        <div style={{ paddingBottom: '50px', paddingTop: '40px' }}><Container>
          <Segment style={paleBlueStyle}>
            <Header as="h2" textAlign="center">Your Profile</Header>
            <ProfileCard model={model} />
            <Button color="olive"><Link to={ROUTES.EDIT_PROFILE}>Edit Profile</Link></Button>
          </Segment>
          <Segment style={paleBlueStyle}>
            <Header as="h2" textAlign="center">Team Membership</Header>
            <TeamMembershipWidget />
          </Segment>
        </Container>
        </div>
    );
  }

Matches = props => (
  <div>
    <Container textAlign='left'>
      <div className="matches--list">
        <Card.Group>
          {props.matches.map(item =>
            <Match
              key={ item.id }
              text={ getText(item) }
              score={ getScore(item) }
            />)
          }
        </Card.Group>
      </div>
    </Container>
  </div>
)

function App() {
  return (
    <AuthProvider>
      <Router>
        <Container>
          <MenuBar />
          <Route exact path="/" component={Home} />
          <AuthRoute exact path="/login" component={Login} />
          <AuthRoute exact path="/register" component={Register} />
          <Route exact path="/posts/:postId" component={SinglePost} />
        </Container>
      </Router>
    </AuthProvider>
  );
}

export default function NormalPageWrapper ({ children, hasContainer = true }) {
  return <ApiRequired>
    {hasContainer
      ? <Container>
        {children}
      </Container>
      : children}

  </ApiRequired>
}

function Footer() {
  return (
    <div className="footer">
      
        <Container textAlign="center" className="footer__container">
          <Divider inverted section />
          <Image
            centered
            size="mini"
            src="https://img.icons8.com/doodle/96/000000/user-male-circle.png"
            alt="userPic"
          />
          <List horizontal inverted divided link size="small">
            <List.Item as="a" href="https://github.com/Rajangrg">
              By Rajan Gurung
            </List.Item>
            <List.Item as="a" href="https://github.com/Rajangrg/React-Ecommerce-Template">
              Source Code
            </List.Item>
            <List.Item as="a" href="https://github.com/Rajangrg/React-Ecommerce-Template/blob/master/LICENSE">
              MIT License
            </List.Item>
          </List>
        </Container>
     
    </div>
  );
}

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 (
            <div className='page-container'>
                <Container>
                    <Grid centered columns={2}>
                        <Grid.Row>
                            <Grid.Column width={8}>
                                <BookingForm/>
                            </Grid.Column>
                            <Grid.Column width={8}>
                                <BookingDisplay/>
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
                </Container>
            </div>
        )
    }

App = () => {
  return (
    <Container className="App">
      <Header as="h1" dividing>Simple React App Using AlgoSigner</Header>
      <p>
        The Pure Stake Team provide many examples using AlgoSigner.
        See <a
        href="https://purestake.github.io/algosigner-dapp-example">https://purestake.github.io/algosigner-dapp-example</a> for
        more examples.
      </p>

      <CheckAlgoSigner/>

      <GetAccounts/>

      <GetParams/>

      <GetAppGlobalState/>

    </Container>
  );
}

render() {
    return (
      <Container>
        <div className="ui two item menu">
          <NavLink className="item" activeClassName="active" exact to="/">Contacts List</NavLink>
          <NavLink className="item" activeClassName="active" exact to="/contacts/new">Add Contact</NavLink>
        </div>
        <Route exact path="/" component={ContactListPage}/>
        <Route path="/contacts/new" component={ContactFormPage}/>
        <Route path="/contacts/edit/:_id" component={ContactFormPage}/>
      </Container>
    );
  }

export default function App() {
  return (
    <Container>
      <h1>React Hooks Context Demo</h1>
      <CounterView />
      <ContactView />
    </Container>
  )
}

Footer = () => (
  <Segment id="deniFooter" inverted vertical style={{ padding: "5em 0em" }}>
    <Container>
      <Grid divided inverted stackable>
        <Grid.Row>
          <Grid.Column width={3}>
            <Header inverted as="h4" content="About" />
            <List link inverted>
              <List.Item as="a">Sitemap</List.Item>
              <List.Item as="a">Contact Us</List.Item>
              <List.Item as="a">Religious Ceremonies</List.Item>
              <List.Item as="a">Gazebo Plans</List.Item>
            </List>
          </Grid.Column>
          <Grid.Column width={3}>
            <Header inverted as="h4" content="Services" />
            <List link inverted>
              <List.Item as="a">Banana Pre-Order</List.Item>
              <List.Item as="a">DNA FAQ</List.Item>
              <List.Item as="a">How To Access</List.Item>
              <List.Item as="a">Favorite X-Men</List.Item>
            </List>
          </Grid.Column>
          <Grid.Column width={7}>
            <Header as="h4" inverted>
              Footer Header
            </Header>
            <p>
              Extra space for a call to action inside the footer that could help
              re-engage users.
            </p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </Container>
  </Segment>
)

function App() {
  return (
    <ContextConnector>
      <Router>
        <Navbar />
        <Switch>
          <Container>
            <Route exact path="/" component={Home} />
            <Route exact path="/categories" component={Categories} />
            <Route exact path="/products" component={Products} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/signin" component={Signin} />
          </Container>
        </Switch>
      </Router>
    </ContextConnector>
  );
}

App = () => {
  return (
    <>
      <Navbar />
        <MainContainer>
          <Container>
            <Routes />
          </Container>
        </MainContainer>
      <Footer />
    </>
  );
}

render() {
    const { providerName } = this.props;
    const { hasError, errorMessage } = this.state;
    const params = parseParams(window.location.search);
    this.checkIfOauthLoginResponse(params);
    const { enabled, label, name, className, semanticUiColor, ...restProps } =
      invenioConfig.APP.OAUTH_PROVIDERS[providerName];
    return (
      <Overridable id="LoginWithOauth.layout" {...this.props}>
        <Container fluid>
          <div className="pb-default">
            <LoginWithOauthButton
              key={name}
              content={label}
              name={name}
              nextUrl={params.next || FrontSiteRoutes.home}
              color={semanticUiColor}
              className={className}
              hasError={hasError}
              errorMessage={errorMessage}
              {...restProps}
            />
          </div>
        </Container>
      </Overridable>
    );
  }

CommunitySelectionFooter = () => {
  return (
    <>
      <Divider hidden />
      <Container>
        <Segment textAlign="center">
          <p>
            <Trans>
              Did not find a community that fits you? Upload without a community
              or <a href="/communities/new">create your own.</a>
            </Trans>
          </p>
        </Segment>
      </Container>
    </>
  );
}

render() {
    const { record } = this.state;
    return (
      <Container>
        <BaseForm
          onSubmit={this.onSubmit}
          onError={this.onError}
          formik={{
            initialValues: this.initialValues,
            validationSchema: this.MyFormSchema,
            // Custom validation function
            // validate: this.validate,
          }}
        >
          <Header textAlign="center">My Form</Header>
          <TextField
            fieldPath="title"
            placeholder="Enter a new title"
            label="Title"
            fluid
            required
          />
          <RecordPreviewer record={record} />
        </BaseForm>
      </Container>
    );
  }

export function DetailPage() {
  const { __id } = useParams();
  const [Id, setId] = useRecoilState(locationId);
  console.log(__id);

  useEffect(() => {
    console.log({ __id });
    setId(__id);
  }, [__id]);

  return (
    <Container>
      <Header as="h3">Detail of #{Id}</Header>
      <LocationDataURLView __id={__id} />
      <LocationODataView __id={__id} />
      <LocationRawDataView __id={__id} />
    </Container>
  );
}

function CitedBy({ citedBy, total, offset, onOffsetChange }) {
  return (
    <Container>
      {citedBy.slice(offset, offset + 10).map(id => (
        <Citation key={id} id={id} />
      ))}
      <Pagination {...{ total, offset, onOffsetChange }} />
    </Container>
  );
}

Navbar = ({ pageId, data }) => {
  return (
    <Container>
      <Menu borderless className='navbar ui container new'>
        {NavMap[pageId].map(hash => (
          <Menu.Item>
            <span
              className='nav-text'
              onClick={() => {
                document.querySelector(`#${hash}`).scrollIntoView({
                  behavior: 'smooth'
                });
              }}
            >
              {hash}
            </span>
          </Menu.Item>
        ))}
      </Menu>
    </Container>
  );
}

// Render the signin form.
  render() {
    // console.log(this.state);
    let pathname = ROUTES.LANDING;
    if (Participants.isDefined(Meteor.userId())) {
      const dev = Participants.findDoc({ userID: Meteor.userId() });
      // console.log(dev);
      if (dev.isCompliant) {
        if (dev.editedProfile) {
          pathname = ROUTES.LANDING;
        } else {
          pathname = ROUTES.CREATE_PROFILE;
        }
      } else {
        pathname = ROUTES.AGE_CONSENT;
      }
    }
    const { from } = this.props.location.state || { from: { pathname } };
    // if correct authentication, redirect to page instead of login screen
    if (this.state.redirectToReferer) {
      return <Redirect to={from} />;
    }
    // Otherwise return the Login form.
    return (
        <Container>
          <Grid textAlign="center" verticalAlign="middle" centered columns={1}>
            <Grid.Column>
              <Header as="h2" textAlign="center">
                Login to your account
              </Header>
              <Form onSubmit={this.submit}>
                <Segment stacked>
                  <Form.Input
                      label="Email"
                      icon="user"
                      iconPosition="left"
                      name="email"
                      type="email"
                      placeholder="E-mail address"
                      onChange={this.handleChange}
                  />
                  <Form.Input
                      label="Password"
                      icon="lock"
                      iconPosition="left"
                      name="password"
                      placeholder="Password"
                      type="password"
                      onChange={this.handleChange}
                  />
                  <Form.Button content="Submit" />
                </Segment>
              </Form>
              {this.state.error === '' ? (
                  ''
              ) : (
                  <Message
                      error
                      header="Login was not successful"
                      content={this.state.error}
                  />
              )}
            </Grid.Column>
          </Grid>
        </Container>
    );
  }

function Checkout() {
  const [{ basket }] = useStateValue();
  return (
    <div className="checkout">
      <Container>
        <Grid doubling stackable>
          <Grid.Row>
            <Grid.Column width={8}>
              <div>
                {basket?.length === 0 ? (
                  <div className="checkout__warningMessage">
                    <Message warning>
                      <Message.Header>
                        Your shopping basket is empty
                      </Message.Header>
                      <p>
                        You have no items in your basket. To buy one or more
                        items , please click "Add to basket" next to the item
                      </p>
                    </Message>
                  </div>
                ) : (
                  <div>
                    {basket?.length >= 2 ? (
                      <h2>Your shopping basket items </h2>
                    ) : (
                      <h2>Your shopping basket item </h2>
                    )}
                    <Card fluid className="checkout__card">
                      <Item.Group>
                        {basket?.map((item) => {
                          return (
                            <CheckoutProduct
                              key={item.id}
                              id={item.id}
                              title={item.title}
                              imageUrl={item.imageUrl}
                              price={item.price}
                              rating={item.rating}
                            ></CheckoutProduct>
                          );
                        })}
                      </Item.Group>
                    </Card>
                  </div>
                )}
              </div>
            </Grid.Column>
            {basket?.length > 0 && (
              <div className="checkout__right">
                <Grid.Column width={6}>
                  <Card>
                    <Item.Group divided>
                      <SubTotal></SubTotal>
                    </Item.Group>
                  </Card>
                </Grid.Column>
              </div>
            )}
          </Grid.Row>
        </Grid>
      </Container>
    </div>
  );
}

render() {
        const user = jwt_decode(Cache.getItem(AUTH_USER_ID_TOKEN_KEY));
        return (
            <div className='page-container'>
                <Grid centered>
                    <Grid.Row centered>
                        <Container text>
                            <Header as='h1' style={{ fontSize: '2em', paddingTop: '0.75em',}}>
                                {`Welcome back, ${this.props.auth.user.name ? this.props.auth.user.name : user.name}!`}
                            </Header>
                        </Container>
                    </Grid.Row>
                    <Grid.Row centered style={{ paddingBottom: '4em',}}>
                        <Button
                            color='blue'
                            size='huge'
                            onClick={this.handleClick}
                            icon
                            labelPosition='right'
                        >
                            <Icon name='arrow circle right'/> Book an MRI
                        </Button>
                    </Grid.Row>
                    <Grid.Row centered>
                        <StatisticGroup>
                            <Statistic>
                                <Statistic.Value>{this.props.info.daily}</Statistic.Value>
                                <Statistic.Label>Forms processed today</Statistic.Label>
                            </Statistic>
                            <Statistic>
                                <Statistic.Value>{this.props.info.weekly}</Statistic.Value>
                                <Statistic.Label>Forms processed this week</Statistic.Label>
                            </Statistic>
                            <Statistic>
                                <Statistic.Value>{this.props.info.monthly}</Statistic.Value>
                                <Statistic.Label>Forms processed this month</Statistic.Label>
                            </Statistic>
                        </StatisticGroup>
                    </Grid.Row>
                </Grid>
            </div>
        )
    }

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

DefaultView = ({ content, intl, location }) => {
  const blocksFieldname = getBlocksFieldname(content);
  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);

  return hasBlocksData(content) ? (
    <div id="page-document" className="ui container">
      {map(content[blocksLayoutFieldname].items, (block) => {
        const Block =
          config.blocks.blocksConfig[
            content[blocksFieldname]?.[block]?.['@type']
          ]?.['view'] || null;
        return Block !== null ? (
          <Block
            key={block}
            id={block}
            properties={content}
            data={content[blocksFieldname][block]}
            path={getBaseUrl(location?.pathname || '')}
          />
        ) : (
          <div key={block}>
            {intl.formatMessage(messages.unknownBlock, {
              block: content[blocksFieldname]?.[block]?.['@type'],
            })}
          </div>
        );
      })}
    </div>
  ) : (
    <Container id="page-document">
      <h1 className="documentFirstHeading">{content.title}</h1>
      {content.description && (
        <p className="documentDescription">{content.description}</p>
      )}
      {content.image && (
        <Image
          className="document-image"
          src={content.image.scales.thumb.download}
          floated="right"
        />
      )}
      {content.remoteUrl && (
        <span>
          The link address is:
          <a href={content.remoteUrl}>{content.remoteUrl}</a>
        </span>
      )}
      {content.text?.data && (
        <div
          dangerouslySetInnerHTML={{
            __html: content.text.data,
          }}
        />
      )}
      {content.slate && <RichTextWidgetView value={content.slate} />}
    </Container>
  );
}

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