DropdownMenu e RowActionsMenu

Sobreposição

Menu de ações. O RowActionsMenu é o ··· de cada linha de tabela, pronto.

Substitui no Brain:RowMenupartners dropdown-menuMenuEditarExcluir

Menu da linha

"use client";

import { RowActionsMenu, toast } from "@paytime/ui";
import { Copy, PenLine, Trash2 } from "lucide-react";

export default function Example() {
  return (
    <RowActionsMenu
      label="Ações de Grau Técnico"
      actions={[
        { label: "Editar", icon: <PenLine />, onSelect: () => toast("Editar") },
        { label: "Duplicar", icon: <Copy />, onSelect: () => toast("Duplicar") },
        { label: "Excluir", icon: <Trash2 />, destructive: true, separatorBefore: true, onSelect: () => toast("Excluir") },
      ]}
    />
  );
}

Menu composto

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@paytime/ui";
import { Download } from "lucide-react";

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button tone="neutral" variant="outline" icon={<Download />}>Exportar</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuLabel>Formato</DropdownMenuLabel>
        <DropdownMenuItem>CSV</DropdownMenuItem>
        <DropdownMenuItem>Planilha (XLSX)</DropdownMenuItem>
        <DropdownMenuItem>PDF</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}