() => {
const [activeAlignment, setActiveAlignment] = useState('left');
const [activeSize, setActiveSize] = useState('m');
return (
<Stack gap="m">
<IconToggleGroup>
<IconToggle
icon={<IconTextAlignLeft />}
onClick={() => setActiveAlignment('left')}
isActive={activeAlignment === 'left'}
/>
<IconToggle
icon={<IconTextAlignCenter />}
onClick={() => setActiveAlignment('center')}
isActive={activeAlignment === 'center'}
/>
<IconToggle
icon={<IconTextAlignRight />}
onClick={() => setActiveAlignment('right')}
isActive={activeAlignment === 'right'}
/>
</IconToggleGroup>
<IconToggleGroup>
<IconToggle
onClick={() => setActiveSize('s')}
isActive={activeSize === 's'}
>
S
</IconToggle>
<IconToggle
onClick={() => setActiveSize('m')}
isActive={activeSize === 'm'}
>
M
</IconToggle>
<IconToggle
onClick={() => setActiveSize('l')}
isActive={activeSize === 'l'}
>
L
</IconToggle>
</IconToggleGroup>
</Stack>
)
}