feat: add dates to selected

src/components/cards/LargeBlogLeftCard.astro

@@ -2,17 +2,19 @@
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
+import { formatDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   title: string;
   subTitle: string;
   url: string;
+  pubDate: Date,
   img: string;
   imgAlt: string;
 }
 
-const { title, subTitle, url, img, imgAlt } = Astro.props;
+const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
 ---
 
 <div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
@@ -40,6 +42,7 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
       <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
         {subTitle}
       </p>
+      <div class="flex items-center justify-between w-full">
         <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
           <div class="button-text-title flex relative items-center text-center">
             <span class="mr-2">
@@ -51,6 +54,9 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
             />
           </div>
         </div>
+        <span class="card-text-description text-sm ml-auto">
+          {formatDate(pubDate)}
+        </span>
       </div>
   </a>
 </div>

src/components/cards/LargeBlogRightCard.astro

@@ -2,19 +2,21 @@
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
+import { formatDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   title: string;
   subTitle: string;
   url: string;
+  pubDate: Date;
   imgOne: string;
   imgOneAlt: string;
   imgTwo?: string;
   imgTwoAlt?: string;
 }
 
-const { title, subTitle, url, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
+const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
 ---
 
 <div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
@@ -30,6 +32,7 @@ const { title, subTitle, url, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.pro
       <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
         {subTitle}
       </p>
+      <div class="flex items-center justify-between w-full">
         <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
           <div class="button-text-title flex relative items-center text-center">
             <span class="mr-2">
@@ -41,6 +44,10 @@ const { title, subTitle, url, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.pro
             />
           </div>
         </div>
+        <span class="card-text-description text-sm ml-auto">
+          {formatDate(pubDate)}
+        </span>
+      </div>
     </div>
     {!imgTwo ? (
     <div>

src/components/sections/SelectedPostsSection.astro

@@ -17,6 +17,7 @@ const { posts } = Astro.props;
     title={post.title}
     subTitle={post.description}
     url={`/blog/${post.slug}`}
+    pubDate={post.published_date}
     img={post.image}
     imgAlt={post.image_alt}
   />
@@ -25,6 +26,7 @@ const { posts } = Astro.props;
     title={post.title}
     subTitle={post.description}
     url={`/blog/${post.slug}`}
+    pubDate={post.published_date}
     imgOne={post.image}
     imgOneAlt={post.image_alt}
     imgTwo={post?.image_second}