refactor: Make PostMenu reusable

Author: Pazdikan

package-lock.json

@@ -0,0 +1,68 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/common/components/ui/dropdown-menu";
+import { Button } from "@/common/components/ui/button";
+import React from "react";
+
+export type MenuOption = {
+  id: string;
+  label: string;
+  description?: string;
+  condition?: (context: any) => boolean;
+  disabled?: (context: any) => boolean;
+  onClick: (context: any) => void;
+  separatorBefore?: boolean;
+};
+
+export interface GlobalDropdownMenuProps {
+  options: MenuOption[];
+  context?: any;
+  label?: string;
+  trigger?: React.ReactNode;
+}
+
+export const GlobalDropdownMenu: React.FC<GlobalDropdownMenuProps> = ({
+  options,
+  context,
+  label = "Actions",
+  trigger = (
+    <Button variant="ghost" size="icon">
+      <span>⋮</span>
+    </Button>
+  ),
+}) => {
+  const visibleOptions = options.filter(
+    (option) => !option.condition || option.condition(context)
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>{label}</DropdownMenuLabel>
+        {visibleOptions.map((option) => (
+          <div key={option.id}>
+            {option.separatorBefore && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              disabled={option.disabled?.(context)}
+              onClick={() => option.onClick(context)}
+              className="flex flex-col items-start cursor-pointer"
+            >
+              <p>{option.label}</p>
+              {option.description && (
+                <p className="text-sm text-gray-500 relative">
+                  {option.description}
+                </p>
+              )}
+            </DropdownMenuItem>
+          </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

src/common/components/ui/global-dropdown-menu.tsx

@@ -1,67 +1,23 @@
-import { Button } from "@/common/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/common/components/ui/dropdown-menu";
 import { EllipsisVertical } from "lucide-react";
 import { Post } from "./post.types";
-
-type MenuOption = {
-  id: string;
-  label: string;
-  description?: string;
-  condition?: (post: Post) => boolean;
-  disabled?: (post: Post) => boolean;
-  onClick: (post: Post) => void;
-  separatorBefore?: boolean;
-};
+import { GlobalDropdownMenu } from "@/common/components/ui/global-dropdown-menu";
 
 export const PostMenu = ({ post }: { post: Post }) => {
-  const menuOptions: MenuOption[] = [
-    {
-      id: "dm",
-      label: "Send a DM",
-      description: `Ask about taking the job\nPost type: ${post.type}`,
-      condition: (post) => true,
-      disabled: (post) => false,
-      onClick: (post) => {},
-      separatorBefore: true,
-    },
-  ];
-
-  const visibleOptions = menuOptions.filter(
-    (option) => !option.condition || option.condition(post)
-  );
-
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <EllipsisVertical size={24} />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Post Actions</DropdownMenuLabel>
-
-        {visibleOptions.map((option) => (
-          <div key={option.id}>
-            {option.separatorBefore && <DropdownMenuSeparator />}
-            <DropdownMenuItem
-              disabled={option.disabled?.(post)}
-              onClick={() => option.onClick(post)}
-            >
-              <p>{option.label}</p>
-              {option.description && (
-                <p className="text-sm text-gray-500">{option.description}</p>
-              )}
-            </DropdownMenuItem>
-          </div>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <GlobalDropdownMenu
+      options={[
+        {
+          id: "dm",
+          label: "Send a DM",
+          description: `Ask about taking the job : Post type: ${post.type}`,
+          condition: () => true,
+          disabled: () => false,
+          onClick: () => {},
+          separatorBefore: true,
+        },
+      ]}
+      context={post}
+      label="Post Actions"
+    />
   );
 };