remove dates from blog/learn

app/(pages)/blog/[slug]/page.tsx

@@ -106,7 +106,7 @@ async function BlogPostPage({ params }: BlogPostPageProps) {
         <div className="flex flex-col md:flex-row md:justify-center">
           {showTableOfContents ? (
             <div className="relative">
-              <TableOfContents content={postContent} />
+              <TableOfContents content={postContent} postTitle={postTitle} />
             </div>
           ) : null}
           <div className={showTableOfContents ? 'md:max-w-xl md:ml-10' : ''}>

app/components/blog/PostCard.tsx

@@ -1,10 +1,8 @@
-'use client'
-
 import Link from 'next/link'
 import { BlogPost } from '../../../contentful/blogPost'
 import CardImage from '../shared/CardImage'
-import dayjs from 'dayjs'
 import { LearnPost } from '../../../contentful/learnPost'
+import { UserCircleIcon } from '@heroicons/react/20/solid'
 
 const PostCard = ({
   blogPost,
@@ -13,7 +11,14 @@ const PostCard = ({
   blogPost: BlogPost | LearnPost
   type: 'blog' | 'learn'
 }) => {
-  const { author, createdAt, postDescription, postTitle, slug } = blogPost
+  const {
+    author,
+    authorProfileImage,
+    // createdAt,
+    postDescription,
+    postTitle,
+    slug,
+  } = blogPost
   const customImagePath =
     type === 'blog'
       ? `/images/blog/${slug}-small.webp`
@@ -28,11 +33,20 @@ const PostCard = ({
           <CardImage customImagePath={customImagePath} />
         </div>
         <div className="p-6">
-          <p className="text-th-fgd-2 text-lg font-display mb-1">{postTitle}</p>
+          <h2 className="text-th-fgd-2 text-2xl mb-2">{postTitle}</h2>
           <p>{postDescription}</p>
-          <div className="mt-3">
-            <p className="text-th-fgd-2">{author}</p>
-            <p className="text-sm">{dayjs(createdAt).format('D MMM YYYY')}</p>
+          <div className="mt-3 flex items-center">
+            {authorProfileImage?.src ? (
+              <img
+                className="rounded-full w-6 h-6"
+                src={authorProfileImage.src}
+                alt={authorProfileImage?.alt}
+              />
+            ) : (
+              <UserCircleIcon className="w-6 h-6 text-th-fgd-4" />
+            )}
+            <p className="ml-2 text-th-fgd-2">{author}</p>
+            {/* <p className="text-sm">{dayjs(createdAt).format('D MMM YYYY')}</p> */}
           </div>
         </div>
       </Link>

app/components/blog/PostDetails.tsx

@@ -1,9 +1,6 @@
-'use client'
-
-import { CalendarIcon, UserCircleIcon } from '@heroicons/react/20/solid'
+import { UserCircleIcon } from '@heroicons/react/20/solid'
 import { BlogPost } from '../../../contentful/blogPost'
 import ShareButtonPanel from './ShareButtonPanel'
-import dayjs from 'dayjs'
 import { LearnPost } from '../../../contentful/learnPost'
 
 const PostDetails = ({
@@ -16,7 +13,7 @@ const PostDetails = ({
   const {
     author,
     authorProfileImage,
-    createdAt,
+    // createdAt,
     postDescription,
     postTitle,
     seoTitle,
@@ -44,10 +41,10 @@ const PostDetails = ({
           )}
           <div>
             <p className="text-th-fgd-2 font-bold">{author}</p>
-            <div className="flex items-center space-x-1.5">
+            {/* <div className="flex items-center space-x-1.5">
               <CalendarIcon className="h-4 w-4 text-th-fgd-4" />
               <p>{dayjs(createdAt).format('DD MMM YYYY')}</p>
-            </div>
+            </div> */}
           </div>
         </div>
       ) : null}

app/components/blog/ShareButtonPanel.tsx

@@ -1,3 +1,4 @@
+'use client'
 import {
   FacebookShareButton,
   LinkedInShareButton,

app/components/shared/TableOfContents.tsx

@@ -4,14 +4,16 @@ import { useEffect, useState } from 'react'
 
 const TableOfContents = ({
   content,
+  postTitle,
 }: {
   content: RichTextDocument | undefined
+  postTitle: string
 }) => {
   if (!content) return null
   const headingTwos = content.content
     .filter((node) => node.nodeType === 'heading-2')
     .map((h: any) => h.content[0].value)
-  const [activeSection, setActiveSection] = useState<number | null>(null)
+  const [activeSection, setActiveSection] = useState<number>(0)
 
   useEffect(() => {
     const handleScroll = () => {
@@ -37,6 +39,8 @@ const TableOfContents = ({
       })
       if (active?.id) {
         setActiveSection(active.id)
+      } else if (window.pageYOffset === 0) {
+        setActiveSection(0)
       }
     }
 
@@ -44,8 +48,23 @@ const TableOfContents = ({
     return () => window.removeEventListener('scroll', handleScroll)
   }, [headingTwos])
 
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      //   behavior: 'smooth',
+    })
+  }
+
   return (
     <div className="mt-8 p-6 rounded-lg bg-th-bkg-2 space-y-2 h-max md:sticky md:top-8 md:w-64">
+      <button
+        className={`font-normal text-base focus:outline-none ${
+          activeSection === 0 ? 'text-th-active' : 'text-th-fgd-2'
+        }`}
+        onClick={scrollToTop}
+      >
+        {postTitle}
+      </button>
       {headingTwos.map((heading, index) => (
         <a
           className={`block ${