Button Group

import { useState } from "react";
import { Archive, Check, CopyPlus, Link, Pin, Trash2 } from "lucide-react";
import { ButtonGroup } from "@/components/arc/button-group/button-group";

export function DocumentActions({ doc }: { doc: { id: string; url: string } }) {
  const [copied, setCopied] = useState(false);
  return (
    <ButtonGroup
      label="Document actions"
      items={[
        {
          id: "share",
          label: copied ? "Copied" : "Share",
          reserve: ["Share", "Copied"],
          icon: copied ? <Check /> : <Link />,
          onSelect: async () => {
            await navigator.clipboard.writeText(doc.url);
            setCopied(true);
            setTimeout(() => setCopied(false), 1800);
          },
        },
        { id: "duplicate", label: "Duplicate", icon: <CopyPlus />, onSelect: () => console.log("duplicate") },
        { id: "archive", label: "Archive", icon: <Archive />, onSelect: () => console.log("archive") },
      ]}
      menu={{
        label: "More actions",
        items: [
          { id: "pin", label: "Pin to sidebar", icon: <Pin />, onSelect: () => console.log("pin") },
          { id: "delete", label: "Delete", icon: <Trash2 />, destructive: true, onSelect: () => console.log("delete") },
        ],
      }}
    />
  );
}