Dialog

import { Button, Dialog } from '@/ui'

<Dialog
	title='Modal Example'
	btnLabel='Open Modal'
	btnStyles='primary solid pill'
	addForm={true}
>
	<div>
		<p className='mb-0 text-xl'>
			The <code>dialog</code> element is a useful element for representing any
			kind of dialog in HTML.
		</p>
		<div className='actions'>
			<Button
				className='dark rounded outline'
				type='submit'
			>
				OK!
			</Button>
		</div>
	</div>
</Dialog>

import { Alert, Button, Dialog } from '@/ui'
					
<Dialog
	btnLabel='Open Alert'
	btnStyles='info pill'
	addForm={true}
>
	<Alert
		className={`danger solid mb-0 mt-16 text-start`}
		status='Alert'
		message='An important message for the user.'
	/>
	<div className='actions'>
		<Button
			className='dark rounded outline'
			type='submit'
		>
			OK!
		</Button>
	</div>
</Dialog>

import { Dialog } from '@/ui'
import { Login, Register } from '@/features'

const handleSubmit = (e: any) => {
	const data = new FormData(e.target)
	console.log(Object.fromEntries(data.entries()))
}
					
<Dialog
	title='Login / Regsiter'
	btnLabel='Login / Register'
	btnStyles='outline dark'
>
	<Tabs
		className='w-full pt-12'
		defaultActiveId='LogIn'
	>
		<div
			id='LogIn'
			title='Log In'
			className='active'
		>
			<Login
				method='dialog'
				onSubmit={handleSubmit}
			/>
		</div>
		<div
			id='SignUp'
			title='Sign Up'
		>
			<Register
				method='dialog'
				onSubmit={handleSubmit}
			/>
		</div>
	</Tabs>
</Dialog>

import { Dialog } from '@/ui'
import { Login } from '@/features'
import { UserIcon } from '@heroicons/react/24/solid'

const handleSubmit = (e: any) => {
	const data = new FormData(e.target)
	console.log(Object.fromEntries(data.entries()))
}
					
<Dialog
	title='Login'
	btnIcon={<UserIcon />}
	btnLabel='Login'
	btnStyles='icon circle outline dark lg !p-1'
>
	<Login
		method='dialog'
		onSubmit={handleSubmit}
	/>
</Dialog>

import { Dialog } from '@/ui'
import { Register } from '@/features'

const handleSubmit = (e: any) => {
	const data = new FormData(e.target)
	console.log(Object.fromEntries(data.entries()))
}
					
<Dialog
	title='Sign Up'
	btnLabel='Sign Up'
	btnStyles='link normal-case'
>
	<Register
		method='dialog'
		onSubmit={handleSubmit}
	/>
</Dialog>