dropdown-2

• Vista previa

• Dependencias

  Terminal

  npm install @szhsin/react-menu

• layout.tsx

  import '@szhsin/react-menu/dist/index.css';
  import '@szhsin/react-menu/dist/transitions/slide.css';

• Código

  'use client';
  
  import { Menu, MenuItem, MenuButton, MenuDivider, MenuHeader } from '@szhsin/react-menu';
  
  const Dropdown2 = () => {
    return (
      <Menu
        menuButton={
          <MenuButton className="uppercase w-9 h-9 flex items-center justify-center rounded-md hover:bg-background-secondary transition-colors font-medium text-lg">
            <i className="fi fi-rr-menu-dots-vertical"></i>
          </MenuButton>
        }
        transition
        align="end"
        menuClassName="box-border z-50 text-sm bg-background-secondary p-1 shadow-md rounded-md select-none focus:outline-none min-w-[9rem]"
        arrow
        arrowProps={{
          className: 'bg-background-secondary border-background-secondary',
        }}
      >
        <MenuHeader className="px-2 text-muted-foreground">Acciones</MenuHeader>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-overview"></i>
          Detalles
        </MenuItem>
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-pencil"></i>
          Editar
        </MenuItem>
        <MenuDivider />
        <MenuItem className="flex items-center gap-2 py-1.5 text-foreground cursor-default hover:bg-background-tertiary px-2 rounded-sm transition-colors duration-150">
          <i className="fi fi-rr-trash"></i>
          Eliminar
        </MenuItem>
      </Menu>
    );
  };
  
  export default Dropdown2;