export function AlignDropdownMenu()

in src/Frontend/src/components/plate-ui/align-dropdown-menu.tsx [42:74]


export function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {
    const state = useAlignDropdownMenuState();
    const { radioGroupProps } = useAlignDropdownMenu(state);
    const t = useTranslations('text-editor')

    const openState = useOpenState();
    const IconValue =
    items.find((item) => item.value === radioGroupProps.value)?.icon ??
    Icons.alignLeft;

    return (
        <DropdownMenu modal={false} {...openState} {...props}>
            <DropdownMenuTrigger asChild>
                <ToolbarButton pressed={openState.open} tooltip={t('toolbar.align')} isDropdown>
                    <IconValue />
                </ToolbarButton>
            </DropdownMenuTrigger>

            <DropdownMenuContent align='start' className='min-w-0'>
                <DropdownMenuRadioGroup
                    className='flex flex-col gap-0.5'
                    {...radioGroupProps}
                >
                    {items.map(({ value: itemValue, icon: Icon }) => (
                        <DropdownMenuRadioItem key={itemValue} value={itemValue} hideIcon>
                            <Icon className={iconVariants({ variant: 'toolbar' })} />
                        </DropdownMenuRadioItem>
                    ))}
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}