[TODO] Build a Blog page

[gbowne1]

I just added a new Blog.jsx to the App as a baseline to start with.

I need a paginated Blog container with a comment container. so people can page through my different posts with breadcrumbs or tabs.

I want to be able to include a picture with my blog post.

I also created a boilerplate Editor.jsx too that can be included. Will push this up tonight.

[gbowne1]

@k-deepak04

I added Editor.jsx and made some changes to Blog.jsx last night

Editor.jsx should be a component internal to the Blog.jsx

[k-deepak04]

@gbowne1 i'll pull the changes and see the things.

[gbowne1]

My thought was:

Blog.jsx

import React, { useState, useEffect } from 'react';
import Post from './Post';

const Blog = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/api/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>My Personal Blog</h1>
      {posts.map(post => (
        <Post key={post.id} post={post} />
      ))}
    </div>
  );
};

export default Blog;

Post.jsx

import React, { useState } from 'react';
import { Pagination } from '@mui/material';

const Post = ({ post }) => {
  const [page, setPage] = useState(1);
  const postsPerPage = 5;
  const startIndex = (page - 1) * postsPerPage;
  const endIndex = startIndex + postsPerPage;
  const paginatedPosts = post.slice(startIndex, endIndex);

  const handlePageChange = (event, value) => {
    setPage(value);
  };

  return (
    <div>
      {paginatedPosts.map(p => (
        <div key={p.id}>
          <h2>{p.title}</h2>
          <p>{p.content}</p>
        </div>
      ))}
      <Pagination count={Math.ceil(post.length / postsPerPage)} page={page} onChange={handlePageChange} />
    </div>
  );
};

export default Post;

or an alternative Post.jsx
```jsx
import React from 'react';
import { Breadcrumbs, Link } from '@mui/material';

const Post = ({ post }) => {
  return (
    <div>
      <Breadcrumbs aria-label="breadcrumb">
        <Link color="inherit" href="/">
          Home
        </Link>
        <Link color="inherit" href="/blog">
          Blog
        </Link>
        <Link color="inherit" href={`/blog/\${post.id}`}>
          {post.title}
        </Link>
      </Breadcrumbs>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;