components/post/PostContentCard.tsx

 import Link from "next/link";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 import { formatAndDelocalizeFromTime } from "@/utils/TimeUtils";
-import { Card, CardHeader, CardContent } from "../ui/card";
+import { Card, CardHeader, CardContent, CardFooter } from "../ui/card";
 import { changeHBDToDollarsDisplay } from "@/utils/StringUtils";
-const PostContentCard = (data: any) => {
-  if (!data || !data.data) return;
+import Hive from "@/types/Hive";
 
-  const { category, author, created, body, title, total_payout_value } =
-    data.data;
+interface PostContentCardProps {
+  isPropertiesOpen: boolean;
+  handlePropertiesToggle: () => void;
+  data: Hive.Content;
+}
 
+const PostContentCard: React.FC<PostContentCardProps> = ({
+  isPropertiesOpen,
+  handlePropertiesToggle,
+  data,
+}) => {
+  if (!data) return;
+
+  const { category, author, created, body, title, total_payout_value } = data;
   return (
     <Card className="overflow-hidden pb-0 w-[100%]">
       <div className="flex text-sm justify-between items-center py-1 px-4 border-b-[1px] border-slate-400 bg-rowHover">
@@ -34,6 +45,22 @@ const PostContentCard = (data: any) => {
           <pre className="text-sm">{body}</pre>
         </div>
       </CardContent>
+
+      <CardFooter className="p-0">
+        <div className="flex w-full py-2 px-4 border-t-[1px] border-slate-400">
+          <button
+            onClick={handlePropertiesToggle}
+            className="flex items-center text-xs p-2 hover:bg-buttonHover"
+          >
+            Properties
+            {isPropertiesOpen ? (
+              <ChevronUp className="w-4 ml-1" />
+            ) : (
+              <ChevronDown className="w-4  ml-1" />
+            )}
+          </button>
+        </div>
+      </CardFooter>
     </Card>
   );
 };

components/post/PostPageContent.tsx

+import { useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 
 import usePostContent from "@/hooks/api/postPage/usePostContent";
 import PostContentCard from "./PostContentCard";
+import PostPropertiesTable from "./PostPropertiesTable";
 
 const HIVE_BLOG_URL = "https://hive.blog";
 const PEAKD_URL = "https://peakd.com";
@@ -17,6 +19,10 @@ const PostPageContent = () => {
 
   const { data } = usePostContent(accountName, permlink);
 
+  const [isPropertiesOpen, setIsPropertiesOpen] = useState(false);
+
+  const handlePropertiesToggle = () => setIsPropertiesOpen(!isPropertiesOpen);
+
   if (!data) return;
 
   const { title, author } = data;
@@ -55,7 +61,15 @@ const PostPageContent = () => {
         </div>
       </div>
 
-      <PostContentCard data={data} />
+      <PostContentCard
+        isPropertiesOpen={isPropertiesOpen}
+        handlePropertiesToggle={handlePropertiesToggle}
+        data={data}
+      />
+      <PostPropertiesTable
+        isPropertiesOpen={isPropertiesOpen}
+        data={data}
+      />
     </div>
   );
 };

components/post/PostPropertiesTable.tsx

+import { Fragment } from "react";
+import { Table, TableBody, TableRow, TableCell } from "../ui/table";
+import Hive from "@/types/Hive";
+
+const PROPERTY_KEYS = [
+  "author",
+  "permlink",
+  "category",
+  "json_metadata",
+  "created",
+  "last_update",
+  "depth",
+  "children",
+  "last_payout",
+  "cashout_time",
+  "total_payout_value",
+  "curator_payout_value",
+  "pending_payout_value",
+  "promoted",
+  "body_length",
+  "author_reputation",
+  "root_title",
+  "beneficiaries",
+  "max_accepted_payout",
+  "percent_hbd",
+  "id",
+  "net_rshares",
+  "author_rewards",
+];
+
+const renderParam = (
+  value: string | number | boolean | string[] | number[]
+) => {
+  if (typeof value === "string") {
+    return value.toString();
+  }
+  return JSON.stringify(value);
+};
+const buildTableBody = (data: Hive.Content) => {
+  return PROPERTY_KEYS.map((key, index) => (
+    <Fragment key={index}>
+      <TableRow className="border-b border-gray-700 hover:bg-inherit dark:hover:bg-inherit">
+        <TableCell>{key}</TableCell>
+        <TableCell className="text-left">
+          {renderParam(data[key as keyof Hive.Content])}
+        </TableCell>
+      </TableRow>
+    </Fragment>
+  ));
+};
+
+interface PostPropertiesTableProps {
+  isPropertiesOpen: boolean;
+  data: Hive.Content;
+}
+
+const PostPropertiesTable: React.FC<PostPropertiesTableProps> = ({
+  isPropertiesOpen,
+  data,
+}) => {
+  if (!isPropertiesOpen) return null;
+
+  return (
+    <div className="mt-2 mx-5">
+      <Table>
+        <TableBody>{buildTableBody(data)}</TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default PostPropertiesTable;