Toggle Group

import { ToggleGroup } from '@i4o/catalystui'
import {
	FontBoldIcon,
	FontItalicIcon,
	UnderlineIcon,
	TextAlignLeftIcon,
	TextAlignCenterIcon,
	TextAlignRightIcon,
} from '@radix-ui/react-icons'
 
export default function ToggleGroupExample() {
	return (
		<div className='flex space-x-4'>
			<ToggleGroup
				items={[
					{
						value: 'bold',
						label: 'Font Bold',
						icon: <FontBoldIcon />,
					},
					{
						value: 'italic',
						label: 'Font Italic',
						icon: <FontItalicIcon />,
					},
					{
						value: 'underline',
						label: 'Underline',
						icon: <UnderlineIcon />,
					},
				]}
				type='multiple'
			/>
			<ToggleGroup
				items={[
					{
						value: 'left',
						label: 'Left Align',
						icon: <TextAlignLeftIcon />,
					},
					{
						value: 'center',
						label: 'Center Align',
						icon: <TextAlignCenterIcon />,
					},
					{
						value: 'right',
						label: 'Right Align',
						icon: <TextAlignRightIcon />,
					},
				]}
				type='single'
			/>
		</div>
	)
}