Create separate compoennts for post content and post comments

components/post/PostComments.tsx

+import Hive from "@/types/Hive";
+import PostContent from "./PostContent";
+
+interface PostCommentsProps {
+  comments: Hive.Content[];
+}
+
+const PostComments: React.FC<PostCommentsProps> = ({ comments }) => {
+  if (!comments || !comments.length) return null;
+
+  return comments.map((comment) => {
+    return (
+      <div
+        className="flex mt-4 justify-center"
+        key={comment.id}
+      >
+        <div className="w-[70%]">
+          <PostContent
+            active_votes={comment.active_votes}
+            data={comment}
+          />
+        </div>
+      </div>
+    );
+  });
+};
+
+export default PostComments;

components/post/PostContent.tsx

+import { useState } from "react";
+
+import Hive from "@/types/Hive";
+import PostContentCard from "./PostContentCard";
+import PostPropertiesTable from "./PostPropertiesTable";
+import VoteDetailsTable from "./VoteDetailsTable";
+
+interface PostContentProps {
+  active_votes: Hive.PostPageVoteDetails[];
+  data: Hive.Content;
+}
+
+const PostContent: React.FC<PostContentProps> = ({ active_votes, data }) => {
+  const [isPropertiesOpen, setIsPropertiesOpen] = useState(false);
+  const [isVoteDetailsOpen, setIsVoteDetailsOpen] = useState(false);
+
+  const handlePropertiesToggle = () => setIsPropertiesOpen(!isPropertiesOpen);
+  const handleVoteDetailsToggle = () =>
+    setIsVoteDetailsOpen(!isVoteDetailsOpen);
+
+  const voters = active_votes.map((vote) => vote.voter) ?? [];
+
+  return (
+    <>
+      <PostContentCard
+        isPropertiesOpen={isPropertiesOpen}
+        isVoteDetailsOpen={isVoteDetailsOpen}
+        handlePropertiesToggle={handlePropertiesToggle}
+        handleVoteDetailsToggle={handleVoteDetailsToggle}
+        voteDetailsLength={active_votes.length ?? 0}
+        voters={voters}
+        data={data}
+      />
+      <PostPropertiesTable
+        isPropertiesOpen={isPropertiesOpen}
+        data={data}
+      />
+      {active_votes.length && (
+        <VoteDetailsTable
+          isVoteDetailsOpen={isVoteDetailsOpen}
+          voteDetails={active_votes}
+        />
+      )}
+    </>
+  );
+};
+
+export default PostContent;