Add published date display to article listings page

Co-authored-by: Calinator444 <65635198+Calinator444@users.noreply.github.com>

Author: Copilot

components/articles/articleCard.tsx

@@ -1,5 +1,6 @@
 import { CustomLink } from "../customLink";
 import ArticleAuthor from "./articleAuthor";
+import ArticleDate from "./articleDate";
 
 export type ArticleProps = {
   title: string;
@@ -8,6 +9,7 @@ export type ArticleProps = {
   authorName: string | null;
   authorPosition: string | null;
   authorImage: string | null;
+  publishedDate?: string;
 };
 
 export type ArticleCardProps = {
@@ -22,6 +24,7 @@ const ArticleCard = ({ data }: ArticleCardProps) => {
     authorName,
     authorPosition,
     url,
+    publishedDate,
   }: ArticleProps = data;
   return (
     <CustomLink href={url ?? ""} className="unstyled no-underline">
@@ -31,6 +34,7 @@ const ArticleCard = ({ data }: ArticleCardProps) => {
         userImage={authorImage}
         userName={authorName}
         userPosition={authorPosition}
+        publishedDate={publishedDate}
       />
     </CustomLink>
   );
@@ -42,16 +46,20 @@ const ArticleCardContent = ({
   userName,
   userImage,
   userPosition,
+  publishedDate,
 }) => {
   return (
     <div className="size-full bg-white">
       <div>
         <h2 className="my-1">{title}</h2>
-        <ArticleAuthor
-          name={userName}
-          position={userPosition}
-          image={userImage}
-        />
+        <div className="flex flex-row items-center gap-2 py-1">
+          <ArticleAuthor
+            name={userName}
+            position={userPosition}
+            image={userImage}
+          />
+          <ArticleDate publishedDate={publishedDate} />
+        </div>
         <div className="font-normal prose-p:mt-0">{body}</div>
       </div>
     </div>

components/articles/articlesList.tsx

@@ -17,6 +17,7 @@ const ArticlesList = () => {
       author,
       title,
       seo,
+      publishedDate,
       _sys: { filename },
     } = article;
     const description = seo?.description ?? null;
@@ -27,6 +28,7 @@ const ArticlesList = () => {
       authorName: author?.presenter?.name,
       authorPosition: author?.position,
       body: description,
+      publishedDate,
     };
 
     return <ArticleCard data={prop} key={`article-card-${index}`} />;