Render vote details table

components/post/PostContentCard.tsx

@@ -8,13 +8,17 @@ import Hive from "@/types/Hive";
 
 interface PostContentCardProps {
   isPropertiesOpen: boolean;
+  isVoteDetailsOpen: boolean;
   handlePropertiesToggle: () => void;
+  handleVoteDetailsToggle: () => void;
   data: Hive.Content;
 }
 
 const PostContentCard: React.FC<PostContentCardProps> = ({
   isPropertiesOpen,
+  isVoteDetailsOpen,
   handlePropertiesToggle,
+  handleVoteDetailsToggle,
   data,
 }) => {
   if (!data) return;
@@ -47,10 +51,10 @@ const PostContentCard: React.FC<PostContentCardProps> = ({
       </CardContent>
 
       <CardFooter className="p-0">
-        <div className="flex w-full py-2 px-4 border-t-[1px] border-slate-400">
+        <div className="flex w-full py-1 px-4 border-t-[1px] border-slate-400">
           <button
             onClick={handlePropertiesToggle}
-            className="flex items-center text-xs p-2 hover:bg-buttonHover"
+            className="flex items-center text-xs px-2 hover:bg-buttonHover"
           >
             Properties
             {isPropertiesOpen ? (
@@ -59,6 +63,17 @@ const PostContentCard: React.FC<PostContentCardProps> = ({
               <ChevronDown className="w-4  ml-1" />
             )}
           </button>
+          <button
+            onClick={handleVoteDetailsToggle}
+            className="flex items-center text-xs px-2 hover:bg-buttonHover"
+          >
+            Vote Details
+            {isVoteDetailsOpen ? (
+              <ChevronUp className="w-4 ml-1" />
+            ) : (
+              <ChevronDown className="w-4  ml-1" />
+            )}
+          </button>
         </div>
       </CardFooter>
     </Card>

components/post/PostPageContent.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import usePostContent from "@/hooks/api/postPage/usePostContent";
 import PostContentCard from "./PostContentCard";
 import PostPropertiesTable from "./PostPropertiesTable";
+import VoteDetailsTable from "./VoteDetailsTable";
 
 const HIVE_BLOG_URL = "https://hive.blog";
 const PEAKD_URL = "https://peakd.com";
@@ -20,12 +21,15 @@ const PostPageContent = () => {
   const { data } = usePostContent(accountName, permlink);
 
   const [isPropertiesOpen, setIsPropertiesOpen] = useState(false);
+  const [isVoteDetailsOpen, setIsVoteDetailsOpen] = useState(false);
 
   const handlePropertiesToggle = () => setIsPropertiesOpen(!isPropertiesOpen);
+  const handleVoteDetailsToggle = () =>
+    setIsVoteDetailsOpen(!isVoteDetailsOpen);
 
   if (!data) return;
 
-  const { title, author } = data;
+  const { title, author, active_votes } = data;
 
   return (
     <div className="w-full h-full p-10">
@@ -63,13 +67,19 @@ const PostPageContent = () => {
 
       <PostContentCard
         isPropertiesOpen={isPropertiesOpen}
+        isVoteDetailsOpen={isVoteDetailsOpen}
         handlePropertiesToggle={handlePropertiesToggle}
+        handleVoteDetailsToggle={handleVoteDetailsToggle}
         data={data}
       />
       <PostPropertiesTable
         isPropertiesOpen={isPropertiesOpen}
         data={data}
       />
+      <VoteDetailsTable
+        isVoteDetailsOpen={isVoteDetailsOpen}
+        voteDetails={active_votes}
+      />
     </div>
   );
 };

components/post/PostPropertiesTable.tsx

@@ -29,7 +29,13 @@ const PROPERTY_KEYS = [
 ];
 
 const renderParam = (
-  value: string | number | boolean | string[] | number[]
+  value:
+    | string
+    | number
+    | boolean
+    | string[]
+    | number[]
+    | Hive.PostPageVoteDetails[]
 ) => {
   if (typeof value === "string") {
     return value.toString();