Update production

src/app/(admin)/admin/posts/[id]/_components/parts/DownloadIGStoryButton.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { FaDownload } from "react-icons/fa";
+
+export default function DownloadIGStoryButton({
+  slug,
+}: Readonly<{ slug: string }>) {
+  const handleDownload = () => {
+    const link = document.createElement("a");
+    link.href = `/api/post/${slug}/instagram-story.png`;
+    link.download = `${slug}-instagram-story.png`;
+    link.click();
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      title="Download Instagram Story Image"
+      className="bg-purple-100 text-purple-800 text-xs font-medium p-2.5 rounded hover:text-white hover:bg-purple-700 transition-all flex items-center justify-center"
+    >
+      <FaDownload className="mr-2" /> Download Instagram Story
+    </button>
+  );
+}

src/app/(admin)/admin/posts/[id]/page.tsx

@@ -8,6 +8,7 @@ import { findAllTags } from "@/utils/database/tag.query";
 
 import EditForm from "./_components/Form";
 import PublishButton from "./_components/parts/PublishButton";
+import DownloadIGStoryButton from "./_components/parts/DownloadIGStoryButton";
 
 export const revalidate = 0;
 
@@ -26,8 +27,11 @@ export default async function Edit({ params }: { params: { id: string } }) {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex justify-between">
-        <H1>Edit Post</H1>
+      <div className="flex justify-between items-center">
+        <div className="flex items-center gap-4">
+          <H1>Edit Post</H1>
+          <DownloadIGStoryButton slug={data.slug} />
+        </div>
         <PublishButton state={data.published} id={data.id} />
       </div>
       <EditForm tags={tags} post={data} />

src/app/(admin)/admin/posts/_components/Table.tsx

@@ -2,19 +2,41 @@
 import { useRouter } from "next-nprogress-bar";
 import { useEffect, useState } from "react";
 import DataTable, { TableColumn } from "react-data-table-component";
-import { FaRegTrashAlt } from "react-icons/fa";
+import { FaRegTrashAlt, FaDownload } from "react-icons/fa";
 import { MdPublish, MdUnpublished } from "react-icons/md";
 import { toast } from "sonner";
 
 import { postDelete, updatePostStatus } from "@/actions/post";
 import { PostWithTagsAndUser } from "@/types/entityRelations";
 import { stringifyCompleteDate } from "@/utils/atomics";
 
-export default function PostTable({ data }: { data: PostWithTagsAndUser[] }) {
+export default function PostTable({
+  data,
+}: Readonly<{ data: PostWithTagsAndUser[] }>) {
   const [loader, setLoader] = useState(true);
   const router = useRouter();
 
   const columns: TableColumn<PostWithTagsAndUser>[] = [
+    {
+      name: "Share Image",
+      cell: (row: PostWithTagsAndUser) => (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            const link = document.createElement("a");
+            link.href = `/api/post/${row.slug}/instagram-story.png`;
+            link.download = `${row.slug}-instagram-story.png`;
+            link.click();
+          }}
+          title="Download Instagram Story Image"
+          className="bg-purple-100 text-purple-800 text-xs font-medium me-2 p-2.5 rounded hover:text-white hover:bg-purple-700 transition-all flex items-center justify-center"
+        >
+          <FaDownload />
+        </button>
+      ),
+      width: "80px",
+      sortable: false,
+    },
     {
       name: "Title",
       selector: (row: PostWithTagsAndUser) => row.title,
@@ -30,7 +52,6 @@ export default function PostTable({ data }: { data: PostWithTagsAndUser[] }) {
       cell: (row: PostWithTagsAndUser) => (
         <span>{row.tags.map((tag) => tag.tagName).join(", ")}</span>
       ),
-
       sortable: false,
     },
     {
@@ -66,14 +87,20 @@ export default function PostTable({ data }: { data: PostWithTagsAndUser[] }) {
       cell: (row: PostWithTagsAndUser) => (
         <div className="flex gap-2">
           <button
-            onClick={() => updateStatus(row.published, row.id)}
+            onClick={(e) => {
+              e.stopPropagation();
+              updateStatus(row.published, row.id);
+            }}
             title={row.published ? "Unpublish post" : "Publish post"}
             className="bg-blue-100 text-blue-800 text-xs font-medium me-2 p-2.5 rounded hover:text-white  hover:bg-blue-700 transition-all"
           >
             {row.published ? <MdUnpublished /> : <MdPublish />}
           </button>
           <button
-            onClick={() => deletePost(row.id)}
+            onClick={(e) => {
+              e.stopPropagation();
+              deletePost(row.id);
+            }}
             title="Delete Post"
             className="bg-red-100 text-red-800 text-xs font-medium me-2 p-2.5  rounded hover:text-white  hover:bg-red-700 transition-all"
           >