Drawer

import { Button, Drawer } from '@creation-ui/react'
import { useState } from 'react'
 
export const DrawerExample = () => {
  const [open, setOpen] = useState(false)
 
  const onClose = () => setOpen(false)
  const onClick = () => setOpen(true)
 
  return (
    <>
      <Button onClick={onClick}>Open Drawer</Button>
      <Drawer open={open} onClose={onClose}>
        <div className='p-5'>
          <h1>Payment successful</h1>
          <div className='mt-2'>
            <p className='text-sm text-gray-500'>
              Your payment has been successfully submitted. We&apos;ve sent you an email with all of the details of your
              order.
            </p>
          </div>
          <div className='mt-4'>
            <Button onClick={onClose}>Got it, thanks!</Button>
          </div>
        </div>
      </Drawer>
    </>
  )
}

import { Button, Drawer } from '@creation-ui/react'
import { useState } from 'react'
 
export const DrawerCustomizedExample = () => {
  const [open, setOpen] = useState(false)
 
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)
 
  const innerClasses = ['!w-[calc(100%-30px)]', '!h-[calc(100%-30px)]', 'rounded-xl', 'm-[15px]']
 
  return (
    <Container>
      <Button onClick={handleOpen}>Open Drawer</Button>
      <Drawer
        open={open}
        onClose={handleClose}
        cx={{
          width: 'xl:w-1/3 lg:w-1/2 w-full',
          container: {
            inner: clsx(innerClasses),
          },
        }}
      >
        <div className='p-5 flex flex-col'>
          <h1>Title</h1>
          <div className='mt-2 flex-grow'>
            <p className='text-sm text-gray-500'>Content</p>
          </div>
          <div className='mt-4'>
            <Button onClick={handleClose}>Save</Button>
          </div>
        </div>
      </Drawer>
    </Container>
  )
}