developer-roadmap/src/pages/questions/[questionGroupId].astro

---
import GridItem from '../../components/GridItem.astro';
import SimplePageHeader from '../../components/SimplePageHeader.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import Footer from '../../components/Footer.astro';
import AstroIcon from '../../components/AstroIcon.astro';
import { QuestionsList } from '../../components/Questions/QuestionsList';

import {
  getAllQuestionGroups,
  type QuestionGroupType,
} from '../../lib/question-group';

export interface Props {
  questionGroup: QuestionGroupType;
}
export async function getStaticPaths() {
  const questionGroups = await getAllQuestionGroups();

  return questionGroups.map((questionGroup) => {
    return {
      params: { questionGroupId: questionGroup.id },
      props: { questionGroup },
    };
  });
}

const { questionGroup } = Astro.props;
const { frontmatter } = questionGroup;
---

<BaseLayout
  title={frontmatter.seo.title}
  briefTitle={frontmatter.briefTitle}
  description={frontmatter.seo.description}
  keywords={frontmatter.seo.keywords}
  permalink={`/questions/${questionGroup.id}`}
  noIndex={true}
>
  <div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'>
    <div class='container !max-w-[700px]'>
      <div class='mb-3 sm:mb-5 mt-2 text-left sm:text-center sm:mt-8'>
        <div class='mb-2 md:mb-6'>
          <a
            href='/questions'
            class='group rounded-md text-sm font-medium text-gray-400 hover:text-gray-800 transition-colors duration-200'
          >
            <span
              class='inline-block transform transition-transform group-hover:translate-x-[-2px]'
            >
              &larr;
            </span>
            Back to all Questions
          </a>
        </div>
        <h1 class='mb-1 text-2xl font-bold sm:mb-5 sm:text-5xl'>
          {frontmatter.title}
        </h1>
        <p class='hidden sm:block text-xl text-gray-500'>
          {frontmatter.description}
        </p>
      </div>

      <QuestionsList
        groupId={questionGroup.id}
        questions={questionGroup.questions}
        client:load
      />
    </div>
  </div>

  <div slot='page-footer'>
    <Footer />
  </div>
</BaseLayout>