Build your corner
of the internet.

import { useFeed } from "@bitsocial/bitsocial-react-hooks";

function YourFeed({ communityName }) {
  const { feed, hasMore, loadMore } = useFeed({
    communities: [{ name: communityName }],
    sortType: "hot",
    postsPerPage: 3,
  });

  return (
    <div className="preview-feed">
      <header className="preview-feed-header">
        <img className="preview-community-icon" src="/playground/builders-icon.webp" alt="" />
        <div><strong>Community feed</strong><small>{communityName}</small></div>
      </header>
      {feed.map(post => (
        <article className="preview-post" key={post.cid}>
          <div className="preview-byline">
            <span className="preview-avatar" data-author={post.author.address} aria-hidden="true">
              {post.author.displayName?.slice(0, 1)}
            </span>
            <div><strong>{post.author.displayName}</strong><small>{post.author.shortAddress}</small></div>
          </div>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
          {post.thumbnailUrl && <img className="preview-post-image" src={post.thumbnailUrl} alt="A handmade radio on a shared workshop table" />}
          <footer className="preview-post-meta">
            <span>↑ {(post.upvoteCount ?? 0) - (post.downvoteCount ?? 0)} points</span>
            <span>{post.replyCount} replies</span>
          </footer>
        </article>
      ))}
      {hasMore && (
        <button onClick={() => void loadMore()}>
          Load more
        </button>
      )}
    </div>
  );
}