next-seo#VideoGameJsonLd TypeScript Examples

Details: FunctionComponent<Props> = ({ app, summary, stats, developerApps }) => {
  const { t } = useTranslation();
  const [showLightbox, setShowLightbox] = useState(false)
  const [currentScreenshot, setCurrentScreenshot] = useState(0)

  const { trackEvent } = useMatomo()

  const installClicked = (e) => {
    e.preventDefault()
    trackEvent({ category: 'App', action: 'Install', name: app.id })
    window.location.href = `https://dl.flathub.org/repo/appstream/${app.id}.flatpakref`
  }

  const donateClicked = (e) => {
    trackEvent({ category: 'App', action: 'Donate', name: app.id })
  }

  if (app) {
    const moreThan1Screenshot =
      app.screenshots?.filter(pickScreenshot).length > 1

    return (
      <div id={styles.application}>
        <SoftwareAppJsonLd
          name={app.name}
          price='0'
          priceCurrency=''
          operatingSystem='LINUX'
          applicationCategory={categoryToSeoCategories(app.categories)}
        />
        {app.categories?.includes('Game') && (
          <VideoGameJsonLd
            name={app.name}
            authorName={app.developer_name}
            operatingSystemName={'LINUX'}
            storageRequirements={
              summary ? calculateHumanReadableSize(summary.download_size) : t('unknown')
            }
          />
        )
        }
        < header >
          {app.icon && (<div className={styles.logo}>
            <LogoImage iconUrl={app.icon} appName={app.name} />
          </div>)}

          <div className={styles.details}>
            <h2>{app.name}</h2>
            {app.developer_name?.trim().length > 0 && (
              <div className={styles.devName}>{t('by', { developer: app.developer_name })}</div>
            )}
          </div>

          <div className={styles.actions}>
            <Button onClick={installClicked}>{t('install')}</Button>
            {app.urls?.donation && (
              <a
                href={app.urls.donation}
                target='_blank'
                rel='noreferrer'
                onClick={donateClicked}
              >
                <Button type='secondary'>{t('donate')}</Button>
              </a>
            )}
          </div>
        </header>
        <div className={`${styles.carousel}`}>
          {showLightbox && (
            <Lightbox
              mainSrc={
                pickScreenshot(
                  app.screenshots?.filter(pickScreenshot)[currentScreenshot]
                ).url
              }
              onCloseRequest={() => setShowLightbox(false)}
            />
          )}
          <div className={styles.carouselWrapper}>
            {app.screenshots && (
              <div
                className={styles.zoom}
                onClick={() => setShowLightbox(true)}
              >
                <MdZoomIn />
              </div>
            )}
            <Carousel
              showThumbs={false}
              infiniteLoop={true}
              autoPlay={false}
              showArrows={true}
              showIndicators={moreThan1Screenshot}
              swipeable={true}
              emulateTouch={true}
              useKeyboardArrows={true}
              dynamicHeight={false}
              showStatus={false}
              onChange={(index) => {
                setCurrentScreenshot(index)
              }}
              renderArrowNext={(handler, hasNext, label) =>
                hasNext ? (
                  <div className='control-arrow control-next' onClick={handler}>
                    <MdChevronRight />
                  </div>
                ) : (
                  <></>
                )
              }
              renderArrowPrev={(handler, hasPrev, label) =>
                hasPrev ? (
                  <div className='control-arrow control-prev' onClick={handler}>
                    <MdChevronLeft />
                  </div>
                ) : (
                  <></>
                )
              }
            >
              {app.screenshots
                ?.filter(pickScreenshot)
                .map((screenshot, index) => {
                  const pickedScreenshot = pickScreenshot(screenshot)
                  return (
                    <Image
                      key={index}
                      src={pickedScreenshot.url}
                      width={752}
                      height={423}
                      alt={t('screenshot')}
                      loading='eager'
                      priority={index === 0}
                    />
                  )
                })}
            </Carousel>
          </div>
        </div>
        <div className={styles.additionalInfo}>
          <div>
            <h3>{app.summary}</h3>
            <div
              className={styles.description}
              dangerouslySetInnerHTML={{ __html: app.description }}
            />
          </div>

          <Releases releases={app.releases}></Releases>

          <AdditionalInfo
            data={app}
            summary={summary}
            appId={app.id}
            stats={stats}
          ></AdditionalInfo>

          {developerApps && developerApps.length > 0 && (
            <ApplicationSection href={`/apps/collection/developer/${app.developer_name}`} title={t('other-apps-by-developer', { developer: app.developer_name })} applications={developerApps.slice(0, 6)} showMore={developerApps.length > 6} />
          )}

          <AppStatistics stats={stats}></AppStatistics>

          <CmdInstructions appId={app.id}></CmdInstructions>
        </div>
      </div>
    )
  } else {
    return (
      <div className='main-container'>
        <div>{t('loading')}</div>
      </div>
    )
  }
}