Action bar

1"use client";
2import { Button } from "@/components/ui/button";
3import {
4  DropdownMenu,
5  DropdownMenuContent,
6  DropdownMenuGroup,
7  DropdownMenuItem,
8  DropdownMenuTrigger,
9} from "@/components/ui/dropdown-menu";
10import {
11  Tooltip,
12  TooltipContent,
13  TooltipTrigger,
14} from "@/components/ui/tooltip";
15import { Icon } from "@/lib/icon";
16import { cn } from "@/lib/utils";
17import {
18  mdiArchiveOutline,
19  mdiClose,
20  mdiCloudOffOutline,
21  mdiCloudUploadOutline,
22  mdiContentCopy,
23  mdiDotsHorizontal,
24  mdiTrashCanOutline,
25} from "@mdi/js";
26import type { ComponentProps } from "react";
27 
28export interface ActionBarButton {
29  label: string;
30  icon?: string;
31  onClick?: () => void;
32  variant?: "default" | "outline" | "ghost";
33  colorScheme?: "primary" | "neutral" | "success" | "danger";
34  ariaLabel?: string;
35}
36 
37export interface ActionBarMenuItem {
38  label: string;
39  icon?: string;
40  onClick?: () => void;
41  variant?: "default" | "destructive";
42}
43 
44export interface ActionBarProps {
45  isOpen?: boolean;
46  onOpenChange?: (open: boolean) => void;
47  selectedCount?: number;
48  onCancel?: () => void;
49 
50  onPublish?: () => void;
51  onUnpublish?: () => void;
52  onDuplicate?: () => void;
53  onArchive?: () => void;
54  onDelete?: () => void;
55 
56  buttons?: ActionBarButton[];
57  menuItems?: ActionBarMenuItem[];
58  className?: string;
59  align?: "left" | "center" | "right";
60}
61 
62export function ActionBar({
63  isOpen = false,
64  onOpenChange,
65  selectedCount = 0,
66  onCancel,
67 
68  onPublish,
69  onUnpublish,
70  onDuplicate,
71  onArchive,
72  onDelete,
73 
74  buttons,
75  menuItems,
76  className,
77  align = "center",
78  ...props
79}: ActionBarProps & ComponentProps<"div">) {
80  const handleCancel = () => {
81    onOpenChange?.(false);
82    onCancel?.();
83  };
84 
85  const alignClasses = {
86    left: "ml-4",
87    center: "mx-auto",
88    right: "mr-4 ml-auto",
89  };
90 
91  // Default buttons if not provided via array
92  const defaultButtons: ActionBarButton[] = buttons || [
93    {
94      label: "Publish",
95      icon: mdiCloudUploadOutline,
96      onClick: onPublish,
97      variant: "outline",
98      colorScheme: "neutral",
99    },
100    {
101      label: "Unpublish",
102      icon: mdiCloudOffOutline,
103      onClick: onUnpublish,
104      variant: "outline",
105      colorScheme: "neutral",
106    },
107    {
108      label: "Duplicate",
109      icon: mdiContentCopy,
110      onClick: onDuplicate,
111      variant: "default",
112      colorScheme: "primary",
113    },
114  ];
115 
116  // Default menu items if not provided via array
117// … truncated