Actions, a setting, a choice and a submenu

// apps/docs/examples/ui/dropdown-menu.tsx'use client';
import {useState} from 'react';import {  CopyIcon,  MoreHorizontalIcon,  PencilIcon,  Trash2Icon,} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuRadioGroup,  DropdownMenuRadioItem,  DropdownMenuSeparator,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger,} from '@workspace/active-ui/components/primitives/dropdown-menu';
/** * The actions of one row behind a button: plain items, a setting that is on * or off, one choice out of several, a submenu, and a destructive action set * apart. What each item did is printed below, because a menu only reports * the choice. */export default function DropdownMenuExample() {  const [last, setLast] = useState('nothing yet');  const [archived, setArchived] = useState(false);  const [sort, setSort] = useState('name');  return (    <div className="flex flex-col items-center gap-4">      <DropdownMenu>        <DropdownMenuTrigger          render={            <Button variant="outline" size="icon" aria-label="Scheme actions" />          }        >          <MoreHorizontalIcon aria-hidden />        </DropdownMenuTrigger>        <DropdownMenuContent className="w-56">          <DropdownMenuGroup>            <DropdownMenuLabel>Pension scheme 2026</DropdownMenuLabel>            <DropdownMenuItem onClick={() => setLast('Edit')}>              <PencilIcon aria-hidden />              Edit            </DropdownMenuItem>            <DropdownMenuItem onClick={() => setLast('Duplicate')}>              <CopyIcon aria-hidden />              Duplicate            </DropdownMenuItem>            <DropdownMenuSub>              <DropdownMenuSubTrigger>Export as</DropdownMenuSubTrigger>              <DropdownMenuSubContent>                <DropdownMenuItem onClick={() => setLast('Export as CSV')}>                  CSV                </DropdownMenuItem>                <DropdownMenuItem onClick={() => setLast('Export as PDF')}>                  PDF                </DropdownMenuItem>              </DropdownMenuSubContent>            </DropdownMenuSub>          </DropdownMenuGroup>          <DropdownMenuSeparator />          <DropdownMenuCheckboxItem            checked={archived}            onCheckedChange={setArchived}          >            Show archived versions          </DropdownMenuCheckboxItem>          <DropdownMenuSeparator />          <DropdownMenuGroup>            <DropdownMenuLabel>Sort participants by</DropdownMenuLabel>            <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>              <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>              <DropdownMenuRadioItem value="joined">                Date joined              </DropdownMenuRadioItem>            </DropdownMenuRadioGroup>          </DropdownMenuGroup>          <DropdownMenuSeparator />          <DropdownMenuItem            variant="destructive"            onClick={() => setLast('Delete')}          >            <Trash2Icon aria-hidden />            Delete          </DropdownMenuItem>        </DropdownMenuContent>      </DropdownMenu>      <p className="text-muted-foreground text-sm" aria-live="polite">        Last action: {last} · archived {archived ? 'shown' : 'hidden'} · sorted        by {sort}      </p>    </div>  );}