developer-roadmap/src/components/FeaturedGuides.astro

---
import type { GuideFileType } from '../lib/guide';
import GuideListItem from './GuideListItem.astro';
import { QuestionGroupType } from '../lib/question-group';

export interface Props {
  heading: string;
  guides: GuideFileType[];
  questions: QuestionGroupType[];
}

const { heading, guides, questions = [] } = Astro.props;

const sortedGuides: (QuestionGroupType | GuideFileType)[] = [
  ...guides,
  ...questions,
].sort((a, b) => {
  const aDate = new Date(a.frontmatter.date);
  const bDate = new Date(b.frontmatter.date);

  return bDate.getTime() - aDate.getTime();
});
---

<div class='container'>
  <h2 class='block text-2xl font-bold sm:text-3xl'>{heading}</h2>

  <div class='mt-3 sm:my-5'>
    {sortedGuides.map((guide) => <GuideListItem guide={guide} />)}
  </div>

  <a
    href='/guides'
    class='hidden rounded-full bg-gradient-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline'
  >
    View All Guides &rarr;
  </a>

  <div class='mt-3 block sm:hidden'>
    <a
      href='/guides'
      class='font-regular block rounded-md border border-black p-2 text-center text-sm text-black hover:bg-black hover:text-gray-50'
    >
      View All Guides &nbsp;&rarr;
    </a>
  </div>
</div>