ArticleMeta to capture Authors and Article created date

src/blog/components/ArticleCards/ArticleCardSize2.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from '@mui/material';
-import { Author } from "../Author";
+import { ArticleMeta } from "../ArticleMeta";
 import { ArticleCardProps } from "../../types/props";
 import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
 
@@ -46,7 +46,7 @@ export default function ArticleCardSize2({
           </StyledTypography>
         </div>
       </StyledCardContent>
-      <Author authors={article.authors} />
+      <ArticleMeta article={article} />
     </StyledCard>
   );
 };

src/blog/components/ArticleCards/ArticleCardSize4.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardMedia, Typography } from '@mui/material';
-import { Author } from "../Author";
+import { ArticleMeta } from "../ArticleMeta";
 import { ArticleCardProps } from "../../types/props";
 import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
 
@@ -42,7 +42,7 @@ export default function ArticleCardSize4({
           {article.description}
         </StyledTypography>
       </StyledCardContent>
-      <Author authors={article.authors} />
+      <ArticleMeta article={article} />
     </StyledCard>
   );
 };

src/blog/components/ArticleCards/ArticleCardSize6.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardMedia, Typography } from '@mui/material';
-import { Author } from "../Author";
+import { ArticleMeta } from "../ArticleMeta";
 import { ArticleCardProps } from "../../types/props";
 import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
 
@@ -43,7 +43,7 @@ export default function ArticleCardSize6({
           {article.description}
         </StyledTypography>
       </StyledCardContent>
-      <Author authors={article.authors} />
+      <ArticleMeta article={article} />
     </StyledCard>
   );
 };

src/blog/components/ArticleMeta.tsx

@@ -3,8 +3,14 @@ import AvatarGroup from "@mui/material/AvatarGroup";
 import Avatar from "@mui/material/Avatar";
 import {Typography} from "@mui/material";
 import React from "react";
+import { ArticleMetaProps } from "../types/props";
+
+export function ArticleMeta({
+  article,
+}: ArticleMetaProps ) {
+
+  const authors = article.authors;
 
-export function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
   return (
     <Box
       sx={{
@@ -33,7 +39,15 @@ export function Author({ authors }: { authors: { name: string; avatar: string }[
           {authors.map((author) => author.name).join(', ')}
         </Typography>
       </Box>
-      <Typography variant="caption">July 14, 2021</Typography>
+      <Typography variant="caption" color="text.secondary">
+        {new Date(article.created_at).toLocaleString('en-US', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        })}
+      </Typography>
     </Box>
   );
 }

src/blog/types/props.ts

@@ -13,6 +13,10 @@ export interface ArticleProps {
   onBack: () => void;
 }
 
+export interface ArticleMetaProps {
+  article: ArticleModel;
+}
+
 export interface ArticleCardProps {
   article: ArticleModel;
   index: number;