Dialog

import { Button, Dialog, PrimaryButton } from '@i4o/catalystui'
 
export default () => {
	return (
		<Dialog
			action={<PrimaryButton>OK</PrimaryButton>}
			cancel={<Button>Cancel</Button>}
			title={<p className='px-4 pt-4'>Edit Profile</p>}
			description={
				<p className='px-4'>
					Change your profile information here. Click save when you
					are done.
				</p>
			}
			trigger={<Button>Edit Profile</Button>}
		>
			<div className='grid grid-cols-5 gap-4 px-4'>
				<label className='flex items-center text-sm font-semibold col-span-1'>
					Name
				</label>
				<input
					type='text'
					className='h-12 bg-transparent rounded-lg border border-gray-200 dark:border-gray-700 col-span-4'
				/>
				<label className='flex items-center text-sm font-semibold col-span-1'>
					Email
				</label>
				<input
					type='text'
					className='h-12 bg-transparent rounded-lg border border-gray-200 dark:border-gray-700 col-span-4'
				/>
			</div>
		</Dialog>
	)
}