Dropdown Menu

npx shadcn@latest add https://brutallab.facilito.dev/r/dropdown-menu.json

'use client';

import { useState } from 'react';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';

export default function Demo() {
  const [action, setAction] = useState('Choose an action.');
  return (
    <div className="grid gap-4">
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          Actions
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuGroup>
            <DropdownMenuLabel>Document</DropdownMenuLabel>
            <DropdownMenuItem onClick={() => setAction('Duplicate selected')}>
              Duplicate
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setAction('Archive selected')}>
              Archive
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem disabled>Move to team</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
      <output className="bl-type-small">{action}</output>
    </div>
  );
}