Added published date to blog list

tattle-made · Dec 23, 2024 · 63a030a · 63a030a
1 parent 3c85953
commit 63a030a
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/uli-website/src/pages/blog/index.jsx b/uli-website/src/pages/blog/index.jsx
@@ -1,12 +1,18 @@
 import React from "react";
-import { Box, Heading, Text, Anchor, Paragraph } from "grommet";
+import { Box, Heading, Text, Paragraph } from "grommet";
 import { graphql } from "gatsby";
 import AppShell from "../../components/molecules/AppShell";
 import { NavLink } from "../../components/atoms/UliCore";
 
 const BlogIndex = ({ data }) => {
   const blogs = data.allMdx.nodes;
-  console.log(blogs);
+
+  // Function to convert timestamp to readable date
+  const formatDate = (timestamp) => {
+    const date = new Date(parseInt(timestamp)); // Timestamp ko date mein convert kar rahe hain
+    return date.toLocaleDateString(); // Date ko readable format mein dikhana
+  };
+
   return (
     <AppShell>
       <Box align="center" margin={"large"}>
@@ -15,12 +21,16 @@ const BlogIndex = ({ data }) => {
           <Box>
             {blogs.map((blog) => {
               return (
-                <Box>
+                <Box key={blog.fields.slug} margin={{ bottom: "medium" }}>
                   <NavLink to={`${blog.fields.slug}`}>
                     <Paragraph fill>
                       <Text size={"xlarge"}>{blog.frontmatter.name}</Text>,
-                      <Text>{" " + blog.frontmatter.author}</Text>
+                      <Text> {blog.frontmatter.author}</Text>
                     </Paragraph>
+                    {/* Publish date ko yahan display kiya gaya hai */}
+                    <Text size={"small"} color="gray">
+                      Published on: {formatDate(blog.frontmatter.date)}
+                    </Text>
                   </NavLink>
                 </Box>
               );