react-i18next#Translation JavaScript Examples

render() {
    return (
      <ProfileArchivedPhotoServiceComponent>
        {(props) => (
          <React.Fragment>

            <Translation>
              {(t) => (
                <NavigationSecondary
                  onNavLeftPress={() => this.props.navigation.goBack(null)}
                  title={t('Archived')}
                />
              )}
            </Translation>
            
            <ProfileArchivedPhotoComponent {...props} />
          </React.Fragment>
        )}
      </ProfileArchivedPhotoServiceComponent>
    )
  }

render () {
    const { status, onExposuresTab } = this.props
    const extraText = onExposuresTab ? '' : (<Translation>{t => ' ' + t('seeStatusTabMessage')}</Translation>)
    if (status) {
      return (
        <Alert style={{ marginTop: 25, width: '100%' }} severity='error'><Translation>{t => t('elevatedRiskAlertMessage')}</Translation>{extraText}</Alert>
      )
    } else {
      return <div />
    }
  }

render () {
    const { mode } = this.state
    return (
      <Grid
        container
      >
        {
          ((mode === 'default') && (
            <Grid
              container
              direction='column'
              justify='center'
              alignItems='center'
            >
              <img src={reportIcon} width={200} style={{ maxWidth: '80px', marginTop: 20 }} />
              <Typography style={{ marginTop: 25 }}>
                <Translation>{t => t('aboutReportMessage')}</Translation>
              </Typography>
              <Button onClick={this.downloadHistory.bind(this)} variant='contained' color='primary' aria-label='add' style={{ marginTop: 25 }}>
                <GetAppIcon />
                <Translation>{t => t('downloadHistoryButton')}</Translation>
              </Button>
              <a id='downloadAnchorElem' href='/' style={{ display: 'none' }}><Translation>{t => t('downloadHistoryButton')}</Translation></a>
            </Grid>
          ))
        }
      </Grid>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Translation>
          {(t) => (
            <NavigationSecondary
              title={t('Post Verification')}
              onClosePress={() => this.props.navigation.goBack(null)}
            />
          )}
        </Translation>

        <VerificationComponent />
      </SafeAreaView>
    )
  }

render() {
    return (
      <TranslationServiceComponent>
        {(props) => (
          <React.Fragment>
            <Translation>
              {(t) => (
                <NavigationSecondary
                  onNavLeftPress={() => this.props.navigation.goBack(null)}
                  title={t('Choose Language')}
                />
              )}
            </Translation>            

            <TranslationComponent
              {...props}
            />
          </React.Fragment>
        )}
      </TranslationServiceComponent>
    )
  }

render() {
    return (
      <ThemeServiceComponent>
        {(props) => (
          <React.Fragment>
            {props.themePreview.status === 'success' ?
              <ThemeModalComponent
                isVisible={props.themePreview.status === 'success'}
                onApplyClick={() => {
                  props.usersEditProfileRequest()
                  props.themePreviewIdle()
                }}
                onDiscardClick={() => props.themePreviewIdle()}
              >
                <PaperProvider theme={props.themePreview.data.theme}>
                  <FeedScreen />
                </PaperProvider>
              </ThemeModalComponent>
            : null}

            <Translation>
              {(t) => (
                <NavigationSecondary
                  onNavLeftPress={() => this.props.navigation.goBack(null)}
                  title={t('Choose Theme')}
                />
              )}
            </Translation>            

            <ThemeComponent
              {...props}
            />
          </React.Fragment>
        )}
      </ThemeServiceComponent>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onNavLeftPress={() => this.props.navigation.replace('ProfileSelf')}
              title={t('Settings')}
            />
          )}
        </Translation>        

        <SettingsServiceComponent>
          {(props) => (
            <SettingsComponent
              {...props}
            />
          )}
        </SettingsServiceComponent>
      </React.Fragment>
    )
  }

render() {
    return (
      <PostsGridSelectServiceComponent>
        {(props) => (
          <React.Fragment>

            <Translation>
              {(t) => (
                <NavigationSecondary
                  onNavLeftPress={() => this.props.navigation.goBack(null)}
                  title={t('Choose Photo')}
                  rightLabel={t('Update')}
                  onNavRightPress={props.usersEditProfileRequest}
                />
              )}
            </Translation>
            
            <PostsGridSelectComponent {...props} />
          </React.Fragment>
        )}
      </PostsGridSelectServiceComponent>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onClosePress={() => this.props.navigation.goBack(null)}
              title={t('Followers')}
            />
          )}
        </Translation>        

        <ProfileFollowerServiceComponent>
          {(props) => (
            <UserServiceProvider navigation={this.props.navigation}>
              {((userProps) => (
                <ProfileFollowerComponent
                  {...props}
                  {...userProps}
                />
              ))}
            </UserServiceProvider>
          )}
        </ProfileFollowerServiceComponent>
      </SafeAreaView>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onClosePress={() => this.props.navigation.goBack(null)}
              title={t('Following')}
            />
          )}
        </Translation>

        <ProfileFollowedServiceComponent>
          {(props) => (
            <UserServiceProvider navigation={this.props.navigation}>
              {((userProps) => (
                <ProfileFollowedComponent
                  {...props}
                  {...userProps}
                />
              ))}
            </UserServiceProvider>
          )}
        </ProfileFollowedServiceComponent>
      </SafeAreaView>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onNavLeftPress={() => this.props.navigation.goBack(null)}
              title={t('Edit Profile')}
            />
          )}
        </Translation>        

        <ProfileEditServiceComponent>
          {(profileEditProps) => (
            <PrivacyServiceComponent>
              {(privacyProps) => (
                <ProfileEditComponent
                  {...profileEditProps}
                  {...privacyProps}
                />
              )}
            </PrivacyServiceComponent>
          )}
        </ProfileEditServiceComponent>
      </React.Fragment>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onNavLeftPress={() => this.props.navigation.goBack(null)}
              title={t('Mental Health & Privacy Settings')}
            />
          )}
        </Translation>

        <PrivacyServiceComponent>
          {(props) => (
            <PrivacyComponent
              {...props}
            />
          )}
        </PrivacyServiceComponent>
      </React.Fragment>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              title={t('Dating')}
            />
          )}
        </Translation>

        <DatingComponent />
      </React.Fragment>
    )
  }

render() {
    const {data} = this.state;
    
    return (
      <legend
        onClick={this.onClick}
        type="legend"
        className="btn"
        {...this.props}
        style={{bottom: this.props.width > this.props.mobilewidth ? '220px' : '300px'}}
      >
        {colorKey}
        <div
          className={`dialog ${this.state.showDialog ? 'show' : ''} ${
            this.props.y
          } ${this.props.x}`}
        >
          {
            data.map((legends, index) => (
              <div key={index} style={{cursor: "default"}}>
                <span>
                  <div className={`color ${worldStyleColor(legends.worldStyle)}`}
                       style={{cursor: "default"}}/>
                </span>
                <Translation>
                  {(t) => <span style={{cursor: "default"}}>
                    {t(`${legends.title}`)}
                  </span>}
                </Translation>
              </div>
            ))
          }
        </div>
      </legend>
    );
  }

render() {
    return (
      <AvatarPickerServiceComponent>
        {(props) => (
          <SafeAreaView style={{ flex: 1 }}>
            <Translation>
              {(t) => (
                <NavigationSecondary
                  title={t('Upload Profile Photo')}
                />
              )}
            </Translation>            

            <AvatarPickerComponent
              {...props}
            />
          </SafeAreaView>
        )}
      </AvatarPickerServiceComponent>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              title={t('Chat')}
            />
          )}
        </Translation>

        <ChatComponent />
      </React.Fragment>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onClosePress={() => this.props.navigation.goBack(null)}
              title={t('Photo')}
            />
          )}
        </Translation>
        <PostShareServiceComponent>
          {((shareProps) => (
            <PostShareComponent
              {...shareProps}
            />
          ))}
        </PostShareServiceComponent>
      </SafeAreaView>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              title={t('Post Membership')}
              onNavLeftPress={() => this.props.navigation.goBack(null)}
            />
          )}
        </Translation>

        <MembershipComponent />
      </React.Fragment>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              title={t('Notifications')}
            />
          )}
        </Translation>

        <NotificationsComponent />
      </React.Fragment>
    )
  }

render() {
    return (
      <React.Fragment>
        <Translation>
          {(t) => (
            <NavigationSecondary
              title={t('Payout')}
              onNavLeftPress={() => this.props.navigation.goBack(null)}
            />
          )}
        </Translation>

        <PayoutComponent />
      </React.Fragment>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onClosePress={() => this.props.navigation.navigate('Camera')}
              title={t('New Photo')}
            />
          )}
        </Translation>

        <PostsPreviewServiceComponent>
          {((previewProps) => (
            <PostCreateServiceComponent>
              {(props) => (
                <React.Fragment>
                  <PostsPreviewComponent
                    {...previewProps}
                  />
                  <PostCreateComponent
                    {...props}
                    {...previewProps}
                  />
                </React.Fragment>
              )}
            </PostCreateServiceComponent>
          ))}
        </PostsPreviewServiceComponent>
      </SafeAreaView>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Translation>
          {(t) => (
            <NavigationSecondary
              onClosePress={() => this.props.navigation.goBack(null)}
              title={t('Edit Post')}
            />
          )}
        </Translation>

        <PostEditServiceComponent>
          {(props) => (
            <PostEditComponent
              {...props}
            />
          )}
        </PostEditServiceComponent>
      </SafeAreaView>
    )
  }

render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <PaperProvider theme={this.props.navigation.state.params.theme}>
          <Translation>
            {(t) => (
              <NavigationSecondary
                onClosePress={() => this.props.navigation.goBack(null)}
                title={t('Photo')}
              />
            )}
          </Translation>
          <PostsListServiceComponent>
            {(postsProps) => (
              <PostMediaServiceComponent {...postsProps}>
                {(postsProps) => (
                  <UserServiceProvider navigation={this.props.navigation}>
                    {((userProps) => (
                      <PostMediaComponent
                        {...postsProps}
                        {...userProps}
                      />
                    ))}
                  </UserServiceProvider>
                )}
              </PostMediaServiceComponent>
            )}
          </PostsListServiceComponent>
        </PaperProvider>
      </SafeAreaView>
    )
  }

I = ({ s }) => {
  return <Translation>{(t) => t(s)}</Translation>;
}

I = ({ s }) => {
  return <Translation>{(t) => t(s)}</Translation>;
}

render () {
    const { status, statusLoaded, theme } = this.props
    const { mode } = this.state
    const statusMessageLoading = (<Translation>{t => t('statusLoadingMessage')}</Translation>)
    const statusMessageNegative = (<Translation>{t => t('statusNegativeMessage')}</Translation>)
    const statusMessagePositive = (<Translation>{t => t('statusPositiveMessage')}</Translation>)
    const riskLevelLoading = (<Translation>{t => t('statusLoadingMessage')}</Translation>)
    const riskLevelNegative = (<Translation>{t => t('standardRiskLevelMessage')}</Translation>)
    const riskLevelPositive = (<Translation>{t => t('elevatedRiskLevelMessage')}</Translation>)
    const statusMessage = statusLoaded
      ? (status
        ? statusMessagePositive
        : statusMessageNegative)
      : statusMessageLoading
    const riskLevel = statusLoaded
      ? (status
        ? riskLevelPositive
        : riskLevelNegative)
      : riskLevelLoading
    const riskLevelColor = status
      ? 'error'
      : 'success'
    const icon = status
      ? stayHomeIcon
      : distanceIcon
    return (
      <Grid
        container
      >
        {
          ((mode === 'default') && (
            <Grid
              container
              direction='column'
              justify='center'
              alignItems='center'
            >
              <img src={icon} width={200} style={{ maxWidth: '80px', marginTop: 20 }} />
              <Typography style={{ marginTop: 25 }}>
                <Translation>{t => t('yourRiskLevelMessage')}</Translation>: <span style={{ color: theme.palette[riskLevelColor].main }}>{riskLevel}</span>
              </Typography>
              <Typography style={{ marginTop: 15 }}>
                {statusMessage}
              </Typography>
            </Grid>
          ))
        }
      </Grid>
    )
  }

render () {
    const { currentTab, status, statusLoaded, isDrawerOpen, currentLanguage, urlScanState, languages } = this.state
    const CurrentPage = (currentTab === 'checkpoints')
      ? CheckpointsPage
      : (currentTab === 'status')
        ? ExposuresPage
        : ReportPage

    return (
      <div>
        <AppBar position='static' color='secondary'>
          <Container maxWidth='sm' style={{ flexGrow: 1 }}>
            <Toolbar>
              <IconButton
                edge='start'
                color='inherit'
                aria-label='open drawer'
                onClick={this.openDrawer.bind(this)}
              >
                <img src={logo} width={30} height={30} style={{ width: 30 }} />
              </IconButton>
              <Typography variant='h6' component='h1' style={{ flexGrow: 1, fontFamily: '"Open Sans", sans-serif', fontWeight: 'bold' }}>
                {process.env.REACT_APP_NAME}
              </Typography>
              {languages.length > 1 && (
                <Container style={{ textAlign: 'right' }}>
                  <div>
                    <FormControl>
                      <Select
                        labelId='language-select-label'
                        id='language-select'
                        value={currentLanguage}
                        style={{ color: '#fff' }}
                        onChange={this.onSelectLanguage.bind(this)}
                      >
                        { languages.map((language, index) => {
                          return (
                            <MenuItem key={index} value={language.code}>{language.name}</MenuItem>
                          )
                        }) }
                      </Select>
                    </FormControl>
                  </div>
                </Container>
              )}
            </Toolbar>
          </Container>
        </AppBar>
        <Container maxWidth='sm' style={{ marginBottom: 76 }}>
          <Suspense fallback='loading'>
            <StatusAlert status={status} onExposuresTab={currentTab === 'status'} />
            <CurrentPage status={status} statusLoaded={statusLoaded} urlScanState={urlScanState} resetUrlScanState={this.resetUrlScanState.bind(this)} />
          </Suspense>
        </Container>
        <BottomNavigation
          value={currentTab}
          style={{
            width: '100%',
            position: 'fixed',
            bottom: 0
          }}
          onChange={this.onChangeTab.bind(this)}
          showLabels
        >
          <BottomNavigationAction label={<Translation>{t => t('checkpointsTab')}</Translation>} value='checkpoints' icon={<CropFree />} />
          <BottomNavigationAction label=<Translation>{t => t('statusTab')}</Translation> value='status' icon={<Face />} />
          <BottomNavigationAction label=<Translation>{t => t('reportTab')}</Translation> value='report' icon={<ReportIcon />} />
        </BottomNavigation>
        <SwipeableDrawer
          open={isDrawerOpen}
          onOpen={() => {}}
          onClose={this.closeDrawer.bind(this)}
        >
          <List component='nav' aria-label='settings'>
            <ListItemLink style={{ width: 250 }} href={aboutUrl} target='_blank'>
              <ListItemIcon>
                <InfoIcon />
              </ListItemIcon>
              <ListItemText primary=<Translation>{t => t('menuAboutButton')}</Translation> />
            </ListItemLink>
            <ListItemLink style={{ width: 250 }} href={`${serverDomain}/checkpoint`} target='_blank'>
              <ListItemIcon>
                <PinDropIcon />
              </ListItemIcon>
              <ListItemText primary=<Translation>{t => t('menuCheckpointButton')}</Translation> />
            </ListItemLink>
            <ListItemLink style={{ width: 250 }} href={`${adminDomain}/admin`} target='_blank'>
              <ListItemIcon>
                <PersonIcon />
              </ListItemIcon>
              <ListItemText primary=<Translation>{t => t('menuAdminButton')}</Translation> />
            </ListItemLink>
          </List>
        </SwipeableDrawer>
      </div>
    )
  }

render () {
    const { mode, legacyMode } = this.state
    const { status, statusLoaded, urlScanState, theme } = this.props
    const riskLevelLoading = (<Translation>{t => t('statusLoadingMessage')}</Translation>)
    const riskLevelNegative = (<Translation>{t => t('standardRiskLevelMessage')}</Translation>)
    const riskLevelPositive = (<Translation>{t => t('elevatedRiskLevelMessage')}</Translation>)
    const riskLevel = statusLoaded
      ? (status
        ? riskLevelPositive
        : riskLevelNegative)
      : riskLevelLoading
    const riskLevelColor = status
      ? 'error'
      : 'success'
    const computedMode = typeof urlScanState !== 'undefined'
      ? urlScanState
      : mode
    let content
    if (computedMode === 'home') {
      content = (
        <Grid
          container
          direction='column'
          justify='center'
          alignItems='center'
        >
          <Typography variant='h5' style={{ marginTop: 25 }}>
            <Translation>{t => t('slogan')}</Translation>
          </Typography>
          <img src={virusIcon} width={200} style={{ maxWidth: '80px', marginTop: 20 }} />
          <Typography style={{ marginTop: 25 }}>
            <Translation>{t => t('welcomeMessage')}</Translation>
          </Typography>
          <Button onClick={this.joinCheckpoint.bind(this)} variant='contained' color='primary' aria-label='add' style={{ marginTop: 35 }}>
            <CropFreeIcon />
            <Translation>{t => t('joinCheckpointButton')}</Translation>
          </Button>
          <Typography style={{ marginTop: 35, marginBottom: 25 }}>
            <Translation>
              {t => t('learnMoreText')}
            </Translation>
            <Link href={aboutUrl} target='_blank'>
              {aboutUrl}
            </Link>
            .
          </Typography>
        </Grid>
      )
    } else if (computedMode === 'join') {
      content = (
        <Grid
          container
          direction='column'
          justify='center'
          alignItems='center'
        >
          <QRReader
            ref='checkpointQR'
            delay={300}
            onError={this.handleScanError.bind(this)}
            onScan={this.handleScan.bind(this)}
            style={{ width: legacyMode ? 0 : '100%' }}
            facingMode='environment'
            legacyMode={legacyMode}
          />
          { legacyMode && (
            <Typography style={{ marginTop: 25 }}>
              <Translation>{t => t('noCameraPermissionMessage')}</Translation>
            </Typography>
          ) }
          <Button onClick={this.openImageDialog.bind(this)} variant='contained' color='primary' aria-label='add' style={{ marginTop: 25 }}>
            <Translation>{t => t('takePictureButton')}</Translation>
          </Button>
          <Button onClick={this.reset.bind(this)} variant='contained' color='primary' aria-label='add' style={{ marginTop: 25 }}>
            <ArrowBackIcon />
            <Translation>{t => t('backButton')}</Translation>
          </Button>
        </Grid>
      )
    } else if (computedMode === 'scan-success') {
      content = (
        <Grid
          container
          direction='column'
          justify='center'
          alignItems='center'
        >
          <Typography style={{ marginTop: 25 }}>
            <Translation>{t => t('joinSuccessfulMessage')}</Translation>
          </Typography>
          <Typography style={{ marginTop: 15, marginBottom: 25 }}>
            <Translation>{t => t('yourRiskLevelMessage')}</Translation>: <span style={{ color: theme.palette[riskLevelColor].main }}>{riskLevel}</span>
          </Typography>
          <Button onClick={this.reset.bind(this)} variant='contained' color='primary' aria-label='add' style={{ marginTop: 25 }}>
            <ArrowBackIcon />
            <Translation>{t => t('backButton')}</Translation>
          </Button>
        </Grid>
      )
    } else if (computedMode === 'scan-error') {
      content = (
        <Grid
          container
          direction='column'
          justify='center'
          alignItems='center'
        >
          <Typography style={{ marginTop: 25, marginBottom: 25 }}>
            <Translation>{t => t('scanErrorMessage')}</Translation>
          </Typography>
          <Button onClick={this.reset.bind(this)} variant='contained' color='primary' aria-label='add' style={{ marginTop: 25 }}>
            <ArrowBackIcon />
            <Translation>{t => t('backButton')}</Translation>
          </Button>
        </Grid>
      )
    }
    return content
  }

renderMenu = (
  isDark,
  setDarkMode,
  menuItem,
  callback,
  currentDropdown,
  onDropDown,
  onLocateChange,
  locale
) => {
  switch (menuItem) {
    case 'info':
      return {
        title: 'info',
        template: (
          <>
          <Translation>
{ (t) =>
            <>
            <h1>Project Lockdown</h1>
            <p className="ld-alpha banner">
              {t('menu.informationSection.banner')}
            </p>
            <p>
              <b>{t('menu.informationSection.main.name')}</b>
              {t('menu.informationSection.main.text')}
            </p>

            <Expandable
              toggle={t('menu.informationSection.about.title')}
              currentDropdown={currentDropdown}
              onDropDown={onDropDown}
              detail={
                <p>
                  {t('menu.informationSection.about.text.p1')}
                  <b>{t('menu.informationSection.main.name')}</b>
                  {t('menu.informationSection.about.text.p2')}
                  <b>{t('menu.informationSection.main.name')}</b>
                  {t('menu.informationSection.about.text.p3')}
                </p>
              }
            />

            <Expandable
              toggle={t('menu.informationSection.sources.title')}
              currentDropdown={currentDropdown}
              onDropDown={onDropDown}
              detail={
                <>
                  <p>
                    <b>{t('menu.informationSection.main.name')}</b>
                    {t('menu.informationSection.sources.subtitle')}
                  </p>
                  <ul className="ld-sources">
                    <li>
                      <a
                        className="ld-link"
                        target="_blank"
                        rel="noopener noreferrer"
                        href="https://TIOF.Click/LockdownData"
                      >
                        {' '}
                        {t(
                          'menu.informationSection.sources.linksList.first.linkTitle'
                        )}
                      </a>
                      <br />
                      {t(
                        'menu.informationSection.sources.linksList.first.text'
                      )}
                    </li>
                    <li>
                      <a
                        className="ld-link"
                        target="_blank"
                        rel="noopener noreferrer"
                        href="https://covid19api.com/"
                      >
                        {t(
                          'menu.informationSection.sources.linksList.second.linkTitle'
                        )}
                      </a>
                      <br />
                      {t(
                        'menu.informationSection.sources.linksList.second.text'
                      )}{' '}
                      <a
                        href="https://systems.jhu.edu/"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        {t(
                          'menu.informationSection.sources.linksList.second.highlight'
                        )}
                      </a>
                      <br />
                    </li>
                  </ul>
                  <p>
        {t('menu.informationSection.sources.issues.text')}{' '}
                    <a
                      rel="noopener noreferrer"
                      target="_blank"
                      href="https://github.com/Code-for-All/lockdown/issues"
                    >
                      {t(
                        'menu.informationSection.sources.issues.highlight'
                      )}
                    </a>
                    .
                  </p>
                  <div className="link-container">
                    <a
                      className="ld-link"
                      target="_blank"
                      rel="noopener noreferrer"
                      href="https://tiof.click/LockdownData"
                    >
                      {t(
                        `menu.contribution.contributionLinks.firstLink`
                      )}
                    </a>
                    <a
                      className="ld-link"
                      target="_blank"
                      rel="noopener noreferrer"
                      href="https://tiof.click/pldpsf"
                    >
                      {t(
                        `menu.contribution.contributionLinks.secondLink`
                      )}
                    </a>
                  </div>
                </>
              }
            />
            <Expandable
              toggle={t('menu.informationSection.credits.title')}
              currentDropdown={currentDropdown}
              onDropDown={onDropDown}
              detail={
                <p>
                  <b>{t('menu.informationSection.main.name')}</b>
                  {t('menu.informationSection.credits.text')}
                  <a
                    href="https://docs.google.com/spreadsheets/d/1mVyQxxLxAF3E1dw870WHXTOLgYzmumojvzIekpgvLV0/edit?ts=5e74ac83#gid=634415797"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {t('menu.informationSection.credits.highlight')}
                  </a>
                  .
                </p>
              }
            />

            <Expandable
              toggle={t('menu.informationSection.dataPrivacity.title')}
              currentDropdown={currentDropdown}
              onDropDown={onDropDown}
              detail={
                <>
                  <p>
                    {t(
                      'menu.informationSection.dataPrivacity.paragraphs.p1'
                    )}
                  </p>
                  <p>
                    {t(
                      'menu.informationSection.dataPrivacity.paragraphs.p2'
                    )}
                  </p>
                </>
              }
            />
            </>
            }
            </Translation>
          </>
        ),
      };
    case 'settings':
      return {
        title: 'settings',
        template: (
          <Settings
            isDark={isDark}
            setDarkMode={setDarkMode}
            onClose={callback}
            onLocateChange={onLocateChange}
            locale={locale}
          />
        ),
      };
    case 'contribute':
      return {
        title: 'contribute',
        template: (
          <>
            <p>
              Do you have any NPI source you would want to share with us? Please
              follow this link:
            </p>
            <a
              className="ld-link"
              target="_blank"
              rel="noopener noreferrer"
              href="https://docs.google.com/forms/d/e/1FAIpQLSfDWe2qlzUnd3e-YYspMzT9adUswDEYIdJMb7jz7ule34-yiA/viewform"
            >
              Submit data
            </a>
            <p>
              Additionally, you can become part of the project by joining one of
              the following teams:
              <ul>
                <li>Editors</li>
                <li>Devs</li>
                <li>UI/UX</li>
              </ul>
            </p>
            <p>
              Contact us via Telegram at:
              <br />
              <a
                className="ld-link"
                target="_blank"
                rel="noopener noreferrer"
                href="https://t.me/ProjectLockdown"
              >
                {' '}
                @ProjectLockdown
              </a>
            </p>
          </>
        ),
      };

    case 'updates':
      return {
        title: 'updates',
        template: <Ticker />,
      };

    default:
      return {
        title: '',
        template: <></>,
      };
  }
}