TutorialContent.astro

---
import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
import type { Lesson } from '@tutorialkit/types';
import NavCard from './NavCard.astro';

interface Props {
  lesson: Lesson<AstroComponentFactory>;
}

const { lesson } = Astro.props;
const { Markdown, editPageLink, prev, next } = lesson;
---

<div class="flex flex-col h-full overflow-auto scrollbar-transparent p-6 sm:p-8">
  <div class="markdown-content text-tk-elements-content-textColor">
    <Markdown />
  </div>

  {
    editPageLink && (
      <div class="pb-4 mt-8 border-b border-tk-border-secondary">
        <a
          href={editPageLink}
          class="inline-flex flex-items-center text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover hover:underline"
        >
          <span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2" />
          <span>{lesson.data.i18n!.editPageText}</span>
        </a>
      </div>
    )
  }

  <div class="grid grid-cols-[1fr_1fr] gap-4 mt-8 mb-6">
    <div class="flex">
      {prev && <NavCard lesson={prev} type="prev" />}
    </div>
    <div class="flex">
      {next && <NavCard lesson={next} type="next" />}
    </div>
  </div>

  <a
    class="inline-block mt-auto font-size-3.5 underline text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover"
    href="https://webcontainers.io/"
  >
    {lesson.data.i18n!.webcontainerLinkText}
  </a>
</div>