Add astro props

src/components/blog/LatestPosts.astro

@@ -4,26 +4,49 @@ import Grid from '~/components/blog/Grid.astro';
 import { getBlogPermalink } from '~/utils/permalinks';
 import { findLatestPosts } from '~/utils/blog';
 
-const count = 4;
+export interface Props {
+  title?: string;
+  allPostsText?: string;
+  allPostsLink?: string | URL;
+  information?: string;
+  postIds: string[];
+}
+
+const {
+  title = await Astro.slots.render('title'),
+  allPostsText = 'View all posts',
+  allPostsLink = getBlogPermalink(),
+  information = await Astro.slots.render('information'),
+  count = 4,
+} = Astro.props;
+
 const posts = await findLatestPosts({ count });
 ---
 
-<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
+<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
-  <div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
+  <div class="flex flex-col lg:justify-between lg:flex-row 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">
+    <div class="md:max-w-sm">
-      <span class="inline-block mb-1 sm:mb-4"
+      {
-        >Latest articles<br class="hidden md:block" /> in our <a
+        title && (
-          class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          <h2
-          href={getBlogPermalink()}>Blog</a
+            class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
-        >
+            set:html={title}
-      </span>
+          />
-    </h2>
+        )
+      }
+      {
+        allPostsText && allPostsLink && (
+          <a
+            class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
+            href={allPostsLink}
+          >
+            {allPostsText} »
+          </a>
+        )
+      }
+    </div>
 
-    <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
+    {information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
-      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>
   </div>
 
   <Grid posts={posts} />