render()

in src/amo/pages/LandingPage/index.js [215:319]


  render() {
    const {
      errorHandler,
      recommendedAddons,
      highlyRatedAddons,
      i18n,
      loading,
      trendingAddons,
    } = this.props;

    const { visibleAddonType } = this.props.match.params;
    const { addonType, html } = this.contentForType(visibleAddonType);
    const headingText = {
      [ADDON_TYPE_STATIC_THEME]: i18n.gettext('Themes'),
      [ADDON_TYPE_EXTENSION]: i18n.gettext('Extensions'),
    };
    const contentText = {
      [ADDON_TYPE_STATIC_THEME]: i18n.gettext(`Change your browser's appearance.
        Choose from thousands of themes to give Firefox the look you want.`),
      [ADDON_TYPE_EXTENSION]: i18n.gettext(`Explore powerful tools and features
        to customize Firefox and make the browser all your own.`),
    };

    const isAddonTheme = ADDON_TYPE_STATIC_THEME === addonType;
    const title = headingText[addonType];

    return (
      <Page>
        <div
          className={makeClassName('LandingPage', `LandingPage--${addonType}`, {
            'LandingPage--theme': isAddonTheme,
          })}
        >
          <Helmet>
            <title>{title}</title>
          </Helmet>

          <HeadMetaTags description={this.getPageDescription()} title={title} />

          <HeadLinks />

          {errorHandler.renderErrorIfPresent()}

          <div className="LandingPage-header">
            <h1 className="LandingPage-addonType-name">
              {headingText[addonType]}
            </h1>
            <p className="LandingPage-heading-content">
              {contentText[addonType]}
            </p>
          </div>

          <Categories addonType={addonType} />

          <Button
            buttonType="light"
            className="LandingPage-button"
            to={`/${getVisibleAddonType(addonType)}/categories/`}
          >
            {i18n.gettext('Explore all categories')}
          </Button>

          {this.renderIfNotEmpty(
            recommendedAddons,
            <LandingAddonsCard
              addonInstallSource={INSTALL_SOURCE_FEATURED}
              addons={recommendedAddons}
              className="RecommendedAddons"
              footerText={html.recommendedFooterText}
              footerLink={html.recommendedFooterLink}
              header={html.recommendedHeader}
              isTheme={isAddonTheme}
              loading={loading}
            />,
          )}
          {this.renderIfNotEmpty(
            highlyRatedAddons,
            <LandingAddonsCard
              addonInstallSource={INSTALL_SOURCE_TOP_RATED}
              addons={highlyRatedAddons}
              className="HighlyRatedAddons"
              footerLink={html.highlyRatedFooterLink}
              footerText={html.highlyRatedFooterText}
              header={html.highlyRatedHeader}
              isTheme={isAddonTheme}
              loading={loading}
            />,
          )}
          {this.renderIfNotEmpty(
            trendingAddons,
            <LandingAddonsCard
              addonInstallSource={INSTALL_SOURCE_TRENDING}
              addons={trendingAddons}
              className="TrendingAddons"
              footerLink={html.trendingFooterLink}
              footerText={html.trendingFooterText}
              header={html.trendingHeader}
              isTheme={isAddonTheme}
              loading={loading}
            />,
          )}
        </div>
      </Page>
    );
  }