TutorialContent.astro

---
// TutorialContent.astro
import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
import type { Lesson } from '@tutorialkit/types';
import FooterWrapper from './FooterWrapper.astro';
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>

  <FooterWrapper>
    {
      editPageLink && (
        <div slot="edit-page-link" 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 slot="lesson-links" 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
      slot="webcontainers-link"
      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>
  </FooterWrapper>
</div>