PostItem.jsx

const PostItem = ({ post, onLike, onComment }) => {
  return (
    <div className="post-simple">
      <div className="flex items-center gap-6 mb-4">
        <div className="w-[100px] h-[100px] rounded-full bg-[#D9D9D9]"></div>
        <div className="text-[32px] text-center font-bold">{post.username}</div>
      </div>
      
      <div className="py-5 px-0">
        <div className="text-[32px]">{post.content}</div>
      </div>
      
      <div className="flex gap-[26px] mt-4">
        <button 
          onClick={() => onLike(post.id)}
          className="w-[58px] h-[43px] cursor-pointer border-none bg-transparent p-0"
          aria-label="Like post"
        >
          <svg width="58" height="44" viewBox="0 0 58 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M29 43.0625L24.8625 39.2656C9.94 25.8656 0 17.0281 0 6.3125C0 2.76562 2.76562 0 6.3125 0C8.35 0 10.35 0.75 12 2.0625C13.65 0.75 15.65 0 17.6875 0C21.2344 0 24 2.76562 24 6.3125C24 8.35 23.25 10.35 21.9375 12L29 43.0625Z" fill="#FF0000"/>
          </svg>
          <span className="ml-2 text-sm">{post.likesCount}</span>
        </button>
        
        <button 
          onClick={() => onComment(post.id)}
          className="w-[55px] h-[48px] cursor-pointer border-none bg-transparent p-0"
          aria-label="View comments"
        >
          <svg width="55" height="48" viewBox="0 0 55 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M48.8889 0H6.11111C2.75 0 0 2.75 0 6.11111V36.6667C0 40.0278 2.75 42.7778 6.11111 42.7778H42.7778L55 55V6.11111C55 2.75 52.25 0 48.8889 0Z" fill="white"/>
          </svg>
          <span className="ml-2 text-sm">{post.commentsCount}</span>
        </button>
      </div>
    </div>
  );
};

export default PostItem;