developer-roadmap/src/components/GuideHeader.astro

---
import type { GuideFileType } from '../lib/guide';
import { replaceVariables } from '../lib/markdown';

export interface Props {
  guide: GuideFileType;
}

const { guide } = Astro.props;
const { frontmatter, author } = guide;

return undefined;
---

<div class='border-b bg-white py-5 sm:py-12'>
  <div class='container text-left sm:text-center'>
    <p
      class='hidden items-center justify-start text-gray-400 sm:flex sm:justify-center'
    >
      {
        author?.frontmatter && (
          <>
            <a
              href={`/authors/${author.id}`}
              class='inline-flex items-center font-medium hover:text-gray-600 hover:underline'
            >
              <img
                alt={author.frontmatter.name}
                src={author.frontmatter.imageUrl}
                class='mr-2 inline h-5 w-5 rounded-full'
              />
              {author.frontmatter.name}
            </a>
            <span class='mx-1.5'>&middot;</span>
          </>
        )
      }
      <span class='capitalize'>{frontmatter.type} Guide</span>
      <span class='mx-1.5'>&middot;</span>
      <a
        class='text-blue-400 hover:text-blue-500 hover:underline'
        href={`https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/guides/${guide.id}.md`}
        target='_blank'>Improve this Guide</a
      >
    </p>
    <h1 class='my-0 text-balance text-2xl font-bold sm:my-3.5 sm:text-5xl'>
      {replaceVariables(frontmatter.title)}
    </h1>
    <p class='hidden text-xl text-gray-400 sm:block'>
      {replaceVariables(frontmatter.description)}
    </p>
  </div>
</div>