---

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>