Method render

packages/omi-templates/src/pages/product-docs.tsx:116–221

()

  }

  render() {
    return (
      <div class="flex min-h-full bg-white dark:bg-zinc-800">
        <div class="flex w-full flex-col">
          <div class="relative mx-auto flex w-full max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
            <div class="hidden lg:relative lg:block lg:flex-none">
              <div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden"></div>
              <div class="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block"></div>
              <div class="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block"></div>
              <div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
                <o-docs-sidebar
                  onChange={this.onChange}
                  active={this.props.section}
                  items={docsConfig[this.props.lang as Lang].sidebar}
                ></o-docs-sidebar>
              </div>
            </div>
            <div class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
              <article>
                {/* <header class="mb-9 space-y-1">
                  <p class="font-display text-sm font-medium text-primary brightness-125">Introduction</p>
                  <h1 class="font-display text-3xl tracking-tight text-slate-900 dark:text-white">Installation</h1>
                </header> */}

                <md-docs content={this.state.markdownContent}></md-docs>
              </article>
              <dl class="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
                <div>
                  <dt class="font-display text-sm font-medium text-slate-900 dark:text-white">Previous</dt>
                  <dd class="mt-1">
                    <a
                      class="flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 flex-row-reverse"
                      href="/"
                    >
                      Getting started
                      <svg viewBox="0 0 16 16" aria-hidden="true" class="h-4 w-4 flex-none fill-current -scale-x-100">
                        <path d="m9.182 13.423-1.17-1.16 3.505-3.505H3V7.065h8.517l-3.506-3.5L9.181 2.4l5.512 5.511-5.511 5.512Z"></path>
                      </svg>
                    </a>
                  </dd>
                </div>
                <div class="ml-auto text-right">
                  <dt class="font-display text-sm font-medium text-slate-900 dark:text-white">Next</dt>
                  <dd class="mt-1">
                    <a
                      class="flex items-center gap-x-1 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
                      href="/docs/understanding-caching"
                    >
                      Understanding caching
                      <svg viewBox="0 0 16 16" aria-hidden="true" class="h-4 w-4 flex-none fill-current">
                        <path d="m9.182 13.423-1.17-1.16 3.505-3.505H3V7.065h8.517l-3.506-3.5L9.181 2.4l5.512 5.511-5.511 5.512Z"></path>
                      </svg>
                    </a>
                  </dd>
                </div>
              </dl>
            </div>
            <div class="hidden xl:sticky xl:top-[4.75rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.75rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">