⬅️ Back to Table of Contents

📄 RecentBlogPosts

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	7
💠 JSX Elements	13

📚 Table of Contents

• Imports
• JSX Elements
• Functions

🛠️ File Location:

📂 packages/website/src/components/home/RecentBlogPosts/index.tsx

📦 Imports

Name	Source
Link	@docusaurus/Link
recentPosts	@site/data/recent-blog-posts.json
Heading	@theme/Heading
clsx	clsx
React	react
Markdown	react-markdown
styles	./styles.module.css

---

JSX Elements

Component	Type	Props	Children
section	element	className={styles.blogPosts}
div	element	className="container text--center padding-vert--lg"	, ,
Heading	component	as="h2", id="financial-contributors"	text: "Recent Blog Posts"
ul	element	className={styles.postsList}	{recentPosts.map(post => ( <a c...
li	element	className={styles.post}, key={post.title}
a	element	className={styles.postLink}, href={/blog/${post.slug}}	, ,
div	element	className={styles.postTitle}
Markdown	component	none	{post.title}
Markdown	component	none	{post.description}
div	element	className={styles.postTiming}	, text: "·",
time	element	dateTime={post.date}	{new Date(post.date).toLocaleDateString('en-US', { day: 'numeric', month: 'lo...
div	element	none	{post.readingTime}, text: "minute read"
Link	component	className={clsx('button button--primary', styles.seeAll)}, to="/blog"	text: "See all blog posts"

---

Functions

RecentBlogPosts(): React.JSX.Element

Returns: React.JSX.Element

Calls:

• recentPosts.map
• new Date(post.date).toLocaleDateString
• clsx (from clsx)

Code

export function RecentBlogPosts(): React.JSX.Element {
  return (
    <section className={styles.blogPosts}>
      <div className="container text--center padding-vert--lg">
        <Heading as="h2" id="financial-contributors">
          Recent Blog Posts
        </Heading>
        <ul className={styles.postsList}>
          {recentPosts.map(post => (
            <li className={styles.post} key={post.title}>
              <a className={styles.postLink} href={`/blog/${post.slug}`}>
                <div className={styles.postTitle}>
                  <Markdown>{post.title}</Markdown>
                </div>
                <Markdown>{post.description}</Markdown>
                <div className={styles.postTiming}>
                  <time dateTime={post.date}>
                    {new Date(post.date).toLocaleDateString('en-US', {
                      day: 'numeric',
                      month: 'long',
                      year: 'numeric',
                    })}
                  </time>
                  ·<div>{post.readingTime} minute read</div>
                </div>
              </a>
            </li>
          ))}
        </ul>
        <Link
          className={clsx('button button--primary', styles.seeAll)}
          to="/blog"
        >
          See all blog posts
        </Link>
      </div>
    </section>
  );
}

---

Generated by Syntax Scribe