Update Hero, FAQs and HighlightedPosts to props and slots

src/components/blog/HighlightedPosts.astro

@@ -4,31 +4,49 @@ import Grid from '~/components/blog/Grid.astro';
 import { getBlogPermalink } from '~/utils/permalinks';
 import { findPostsByIds } from '~/utils/blog';
 
-const ids = [
-	'get-started-website-with-astro-tailwind-css.md',
-	'how-to-customize-astrowind-to-your-brand.md',
-	'useful-resources-to-create-websites.md',
-	'astrowind-template-in-depth.md',
-];
-const posts = await findPostsByIds(ids);
+export interface Props {
+	title?: string;
+	allPostsText?: string;
+	allPostsLink?: string | URL;
+	information?: string;
+	postsIds: string[];
+}
+
+const {
+	title = await Astro.slots.render('title'),
+	allPostsText = 'View all posts',
+	allPostsLink = getBlogPermalink(),
+	information = await Astro.slots.render('information'),
+	postsIds = [],
+} = Astro.props;
+
+const posts = await findPostsByIds(postsIds);
 ---
 
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
 	<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
-		<h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
-			<span class="inline-block mb-1 sm:mb-4"
-				>Find out more content<br class="hidden md:block" /> in our <a
-					class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-					href={getBlogPermalink()}>Blog</a
-				>
-			</span>
-		</h2>
+		<div class="md:max-w-sm mb-2 lg:mb-5">
+			{
+				title && (
+					<h2
+						class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-1 sm:mb-2"
+						set:html={title}
+					/>
+				)
+			}
+			{
+				allPostsText && allPostsLink && (
+					<a
+						class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+						href={allPostsLink}
+					>
+						{allPostsText} »
+					</a>
+				)
+			}
+		</div>
 
-		<p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
-			The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
-			need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
-			very soon. Astro is a very interesting technology. Thanks.
-		</p>
+		{information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
 	</div>
 
 	<Grid posts={posts} />