PostDetail.jsx

const PostDetail = ({ post, onLike, onComment }) => {
  return (
    <div className="post-detail-container">
      <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-[55px] cursor-pointer border-none bg-transparent p-0"
          aria-label="Like post"
        >
          <svg width="58" height="55" viewBox="0 0 58 55" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M29 54.68L24.8625 50.5156C9.94 36.3156 0 26.8281 0 15.3125C0 6.76562 6.76562 0 15.3125 0C20.35 0 25.15 2.25 29 5.8125C32.85 2.25 37.65 0 42.6875 0C51.2344 0 58 6.76562 58 15.3125C58 26.8281 48.06 36.3156 33.1375 50.5156L29 54.68Z" fill="#FF0000"/>
          </svg>
          <span className="ml-2 text-sm">{post.likesCount}</span>
        </button>
        
        <button 
          onClick={() => onComment(post.id)}
          className="w-[55px] h-[61px] cursor-pointer border-none bg-transparent p-0"
          aria-label="View comments"
        >
          <svg width="55" height="61" viewBox="0 0 55 61" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M48.8889 0H6.11111C2.75 0 0 2.75 0 6.11111V48.8889C0 52.25 2.75 55 6.11111 55H48.8889L55 61V6.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 PostDetail;