PostList component

PostList.js

const PostList = () => {
  const [allPosts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    loadPosts();
  }, []);

  const loadPosts = async () => {
    try {
      const posts = await loadAllPosts();
      setPosts(posts);
      setLoading(false);
    } catch (error) {
      console.log(error);
      setLoading(false);
    }
  }

  const styles = {
    postTopNav: {
      display: "flex", 
      flexDirection: "row", 
      justifyContent: "space-between", 
      borderBottom: "1px solid #666"
    },
    postContainer: {
      maxWidth: "60%", 
      margin: "auto", 
      marginTop: 50
    }
  }
  return (
    <div style={styles.postContainer}>
      {
        loading ? 
        <div>
          <h3>Loading posts...</h3>
        </div> : 
        <div>
          <div style={styles.postTopNav}>
            <div>
              <p>New</p>
            </div>
          </div>
        {allPosts.map((post) => {
          return (
            <div>
              <h3>{post.name}</h3>
              <p>{post.date}</p>
              <Link href={`/posts/${post.hash}`}>Read</Link>
            </div>
          )
        })}
        </div>
      }
    </div>
  )
}